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(

"url","",

{

headers: {

"Content-Type": "application/json;charset=UTF-8"

}

}

)

.then(response => {

var shuzu = response;

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的点击元素的内容

展示