当前位置：首页 > VUE

vue 实现ztree

2026-01-08 00:50:05VUE

在Vue中实现类似ZTree的功能，可以通过集成第三方库或自定义组件完成。以下是两种常见方法：

使用vue-tree组件

vue-tree是一个轻量级的Vue树形组件，支持复选框、懒加载等功能，适合替代ZTree的基础需求。

安装依赖：

npm install vue-tree-chart --save

基础用法示例：

<template>
  <div>
    <vue-tree
      :tree-data="treeData"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import VueTree from 'vue-tree-chart'

export default {
  components: { VueTree },
  data() {
    return {
      treeData: [
        {
          text: 'Parent',
          children: [
            { text: 'Child 1' },
            { text: 'Child 2' }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(node) {
      console.log('Clicked node:', node)
    }
  }
}
</script>

自定义递归组件

对于需要高度定制化的场景，可以创建递归组件实现树形结构。

创建Tree组件：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <span @click="toggle(node)">{{ node.label }}</span>
      <Tree 
        v-if="node.expanded && node.children" 
        :nodes="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

调用自定义组件：

<template>
  <Tree :nodes="treeData" />
</template>

<script>
import Tree from './components/Tree.vue'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Root',
          expanded: true,
          children: [
            { id: 2, label: 'Child A' },
            { id: 3, label: 'Child B' }
          ]
        }
      ]
    }
  }
}
</script>