vue 实现ztree
实现 Vue 与 ZTree 的集成
在 Vue 项目中集成 ZTree（基于 jQuery 的树形插件），需要借助 jQuery 和 ZTree 的库文件，并通过 Vue 的生命周期方法初始化和管理 ZTree。
安装依赖
确保项目中已安装 jQuery 和 ZTree 的相关文件。可以通过 CDN 或本地引入的方式加载资源：
<!-- 在 public/index.html 中引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.all.min.js"></script>创建 Vue 组件
创建一个 Vue 组件来承载 ZTree 的容器，并在 mounted 钩子中初始化 ZTree。
<template>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</template>
<script>
export default {
name: 'ZTreeDemo',
data() {
return {
zTreeObj: null,
setting: {
view: {
showLine: true
},
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pId',
rootPId: 0
}
}
},
zNodes: [
{ id: 1, pId: 0, name: '父节点 1' },
{ id: 2, pId: 1, name: '子节点 1' },
{ id: 3, pId: 1, name: '子节点 2' }
]
};
},
mounted() {
this.initZTree();
},
methods: {
initZTree() {
this.zTreeObj = $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes);
}
}
};
</script>
<style scoped>
@import "~ztree/css/zTreeStyle/zTreeStyle.css";
</style>动态更新数据
如果需要动态更新 ZTree 的数据，可以通过 Vue 的响应式数据更新 ZTree。
methods: {
updateTreeData(newNodes) {
this.zNodes = newNodes;
$.fn.zTree.destroy('treeDemo'); // 销毁旧树
this.initZTree(); // 重新初始化
}
}注意事项
- jQuery 冲突：确保 Vue 和 jQuery 能共存，避免全局污染。
- 组件销毁：在
beforeDestroy钩子中销毁 ZTree 实例，避免内存泄漏。
beforeDestroy() {
if (this.zTreeObj) {
this.zTreeObj.destroy();
}
}通过以上步骤，可以在 Vue 项目中实现 ZTree 的基本功能。根据需求扩展 setting 配置（如回调函数、异步加载等）即可满足更多场景。
