vue整合ztree实现树状
Vue整合ZTree实现树状结构
安装ZTree依赖
在Vue项目中引入ZTree需要添加jQuery和ZTree的相关文件。通过npm或直接引入CDN链接实现：
npm install jquery ztree在main.js中全局引入：
import $ from 'jquery'
import 'ztree'
import 'ztree/css/zTreeStyle/zTreeStyle.css'
window.$ = $创建ZTree容器组件
新建一个Vue组件（如ZTree.vue），用于渲染ZTree的DOM容器：
<template>
<div class="ztree-container">
<ul id="treeDemo" class="ztree"></ul>
</div>
</template>
<style scoped>
.ztree-container {
width: 100%;
height: 400px;
overflow: auto;
}
</style>初始化ZTree配置
在组件的mounted生命周期中初始化ZTree：
export default {
props: {
treeData: Array,
setting: Object
},
mounted() {
this.initZTree()
},
methods: {
initZTree() {
const defaultSetting = {
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'parentId',
rootPId: 0
}
},
callback: {
onClick: this.handleNodeClick
}
}
const finalSetting = Object.assign({}, defaultSetting, this.setting)
$.fn.zTree.init($('#treeDemo'), finalSetting, this.treeData)
},
handleNodeClick(event, treeId, treeNode) {
this.$emit('node-click', treeNode)
}
},
watch: {
treeData(newVal) {
this.initZTree()
}
}
}使用组件示例
在父组件中调用ZTree组件并传递数据：
<template>
<div>
<z-tree
:tree-data="treeNodes"
:setting="treeSettings"
@node-click="onNodeClick"
/>
</div>
</template>
<script>
import ZTree from './components/ZTree'
export default {
components: { ZTree },
data() {
return {
treeNodes: [
{ id: 1, parentId: 0, name: '父节点1' },
{ id: 2, parentId: 1, name: '子节点1' }
],
treeSettings: {
check: {
enable: true
}
}
}
},
methods: {
onNodeClick(node) {
console.log('选中节点:', node)
}
}
}
</script>常用配置项说明
data.simpleData.enable: 启用简单数据模式（扁平数据结构）check.enable: 显示复选框view.showIcon: 显示节点图标callback.onCheck: 复选框勾选回调async.enable: 启用异步加载模式
动态更新数据
通过watch监听数据变化或调用方法手动更新：
// 更新树数据
const zTreeObj = $.fn.zTree.getZTreeObj("treeDemo")
zTreeObj.reAsyncChildNodes(null, "refresh")注意事项
- 确保jQuery仅在ZTree组件范围内使用，避免与其他Vue插件冲突
- 复杂操作建议封装成组件方法通过ref调用
- 大数据量建议启用异步加载或虚拟滚动优化性能
