此文章用来记录自己项目中觉得有用的插件，勿喷
使用
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的点击元素的内容
展示
