ztree在vue下的实战
此文章用来记录自己项目中觉得有用的插件，勿喷
使用
main.js需配置
import "./../static/ztree/js/jquery.ztree.core.js";
import "./../static/ztree/js/jquery.ztree.excheck.js";
import "./../static/ztree/js/jquery.ztree.exedit.js";
import './../static/ztree/css/tree/metroStyle/metroStyle.css'
<div class="ztree-z" v-show="ztreeCon">
<ul id="treeDemo" class="ztree"></ul>
</div>
代码
data里面声明
zTreeObj:"",
setting:{
view: {
selectedMulti: false,
},
data: {
simpleData: {
enable: true
}
},
edit: {
enable: false
},
callback: {
onClick: this.zTreeOnClick,
}
},
onclick是点击事件，由于项目需求需要获取点击元素的id和name所以此处加了点击事件
methods函数
menu(){
this.axios.post(
"yqh/system/ldcom/list","",
{
headers: {
"Content-Type": "application/json;charset=UTF-8"
}
}
)
.then(response => {
var shuzu = response.data.resultValue.ldcomVOs;
var zNodes = new Array();
for (var i = 0; i < shuzu.length; i++) {
var pid_value = 0;
if (shuzu[i].upComcode != 0) {
pid_value = shuzu[i].upComcode;
}
var id_value = 0;
if (shuzu[i].comcode != 0) {
id_value = shuzu[i].comcode;
}
zNodes.push({ id: id_value, pId: pid_value, name: id_value+"-"+shuzu[i].shortName, open: true});
$.fn.zTree.init($("#treeDemo"), this.setting,zNodes);
this.zTreeObj = $.fn.zTree.init($("#treeDemo"), this.setting,zNodes);
}
})
.catch(err => {
console.log(err);
});
},
id，name根据接口返回数据进行修改
zTreeOnClick(event, treeId, treeNode) {//触发点击后面节点问题
this.ztreeId = treeNode.id;
this.ztreeName = treeNode.name;
this.ruleForm.mechanism = treeNode.name;
this.ztreeCon = false;
},
此处用来获取ztree的点击元素的内容
展示
以上是 ztree在vue下的实战 的全部内容， 来源链接： utcz.com/z/377208.html
