vue整合ztree实现树状
整合 Vue 与 ZTree 实现树状结构
安装依赖
确保项目中已引入 jQuery 和 ZTree 相关文件。ZTree 依赖 jQuery，需提前引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ztree@3.5.48/js/jquery.ztree.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ztree@3.5.48/css/zTreeStyle/zTreeStyle.css">Vue 组件封装
创建一个 Vue 组件封装 ZTree 的逻辑，通过 ref 操作 DOM 并初始化树：
<template>
<div>
<ul id="treeDemo" class="ztree" ref="ztree"></ul>
</div>
</template>
<script>
export default {
props: {
treeData: {
type: Array,
default: () => []
},
setting: {
type: Object,
default: () => ({})
}
},
mounted() {
this.initZTree();
},
methods: {
initZTree() {
$.fn.zTree.init($(this.$refs.ztree), this.setting, this.treeData);
}
},
watch: {
treeData(newVal) {
this.initZTree();
}
}
};
</script>配置与数据格式
ZTree 要求数据格式为特定结构的数组，每个节点需包含 id、pId、name 等字段。示例配置：
const setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: (event, treeId, treeNode) => {
console.log(treeNode);
}
}
};
const treeData = [
{ id: 1, pId: 0, name: "父节点" },
{ id: 2, pId: 1, name: "子节点" }
];在父组件中使用
将配置和数据通过 props 传递给封装好的 ZTree 组件：
<template>
<ZTree :setting="setting" :treeData="treeData" />
</template>
<script>
import ZTree from "./ZTree.vue";
export default {
components: { ZTree },
data() {
return {
setting: {
data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId" } }
},
treeData: [
{ id: 1, pId: 0, name: "Root" },
{ id: 2, pId: 1, name: "Child" }
]
};
}
};
</script>动态更新数据
通过 Vue 的响应式特性，修改 treeData 会自动触发 ZTree 重新渲染：
this.treeData = [...this.treeData, { id: 3, pId: 1, name: "New Node" }];注意事项
- jQuery 冲突：若项目中已使用其他版本的 jQuery，需检查兼容性。
- 性能优化：大数据量时建议启用异步加载（
async.enable）。 - 样式隔离：ZTree 的 CSS 可能影响全局，建议使用
scoped或手动覆盖样式。
通过以上步骤，可实现 Vue 与 ZTree 的无缝整合，保留 ZTree 全部功能的同时利用 Vue 的响应式管理数据。
