当前位置：首页 > VUE

vue 实现ztree

2026-03-27 22:12:00VUE

在 Vue 中实现类似 ZTree 的树形结构功能，可以通过以下方法完成。以下内容基于 Vue 生态的常见实践和开源库整合。

使用 vue-zTree 封装组件

若需直接兼容 ZTree 的 API 和样式，可使用社区封装的 vue-ztree 库：

安装依赖：

npm install vue-ztree --save

基础用法示例：

<template>
  <vue-ztree 
    :list="treeData" 
    :isOpen="true" 
    @onClick="handleNodeClick"
  />
</template>

<script>
import VueZtree from 'vue-ztree';
export default {
  components: { VueZtree },
  data() {
    return {
      treeData: [{
        name: '父节点',
        open: true,
        children: [{
          name: '子节点1'
        }]
      }]
    };
  },
  methods: {
    handleNodeClick(node) {
      console.log('点击节点:', node);
    }
  }
};
</script>

基于 Element UI 的 Tree 组件

若项目已使用 Element UI，可直接使用其内置的树形组件：

安装 Element UI：

npm install element-ui

示例代码：

<template>
  <el-tree 
    :data="treeData" 
    :props="defaultProps" 
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '父节点',
        children: [{
          label: '子节点'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('点击节点:', data);
    }
  }
};
</script>

自定义递归组件实现

如需完全自定义树形结构，可通过递归组件实现：

定义组件 TreeItem.vue：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <TreeItem 
        v-if="item.children && item.children.length" 
        :data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeItem',
  props: ['data']
};
</script>

父组件调用：

vue 实现ztree

<template>
  <TreeItem :data="treeData" />
</template>

<script>
import TreeItem from './TreeItem.vue';
export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [{
        id: 1,
        name: '根节点',
        children: [{
          id: 2,
          name: '子节点'
        }]
      }]
    };
  }
};
</script>