当前位置：首页 > VUE

vue 实现ztree

2026-03-07 12:16:18VUE

在 Vue 中实现类似 ZTree 的功能，可以通过集成第三方树形组件或手动封装实现。以下是几种常见方法：

使用第三方组件（推荐）

Element UI 的 Tree 组件
适用于基于 Element UI 的项目，提供基础的树形结构功能：

<template>
  <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级节点',
        children: [{
          label: '二级节点'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

Vue Ant Design 的 Tree 组件
若使用 Ant Design Vue，可通过 a-tree 实现：

<template>
  <a-tree :tree-data="treeData" @select="onSelect" />
</template>
<script>
export default {
  data() {
    return {
      treeData: [
        { title: '节点1', key: '1', children: [
          { title: '子节点', key: '1-1' }
        ]}
      ]
    };
  },
  methods: {
    onSelect(selectedKeys) {
      console.log(selectedKeys);
    }
  }
};
</script>

手动封装树形组件

若需高度自定义，可递归实现树形结构：

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.label }}
      <tree-node v-if="node.children" :treeData="node.children" />
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeNode',
  props: ['treeData']
};
</script>

集成原生 ZTree

若需直接使用 ZTree（jQuery 插件），需在 Vue 中手动处理 DOM：

vue 实现ztree

安装 jQuery 和 ZTree：
```
npm install jquery ztree
```

在组件中初始化：

<template>
  <div ref="ztreeContainer" class="ztree"></div>
</template>
<script>
import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.core';
export default {
  mounted() {
    const settings = {
      data: { simpleData: { enable: true } },
      callback: { onClick: this.handleClick }
    };
    const zNodes = [
      { id: 1, pId: 0, name: "父节点" },
      { id: 2, pId: 1, name: "子节点" }
    ];
    $.fn.zTree.init($(this.$refs.ztreeContainer), settings, zNodes);
  },
  methods: {
    handleClick(event, treeId, treeNode) {
      console.log(treeNode);
    }
  }
};
</script>