如何在vue项目中使用tree组件(Ztree)
先上两张效果图
支持右键事件,拖动节点,以及复制粘贴功能。
1、vue需要引入jquery
2、封装ztree组件
3、初始化tree配置
setting: {
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: this.zTreeOnClick,
onRightClick: this.treeNodeRClick,
beforeDrag: this.beforeDrag,
beforeDrop: this.beforeDrop,
onDrag: this.onDrag,
onDrop: this.onDrop
},
async: {
enable: true, // 开启异步加载
url: "", //对应的后台请求路径
dataType: "json",
autoParam: [] // 异步加载时需要自动提交父节点属性的参数
}
},
4、初始化tree数据:
$.fn.zTree.init($("#tree"), this.setting, this.zNodes).expandAll(true);
5、关于右键事件请参考博主资源模块