当前位置：首页 > VUE

vue 树形控件实现

2026-03-30 07:45:39VUE

实现 Vue 树形控件的方法

使用第三方组件库（如 Element UI）

Element UI 提供了现成的树形控件组件 el-tree，可直接使用。以下是一个基础示例：

<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>

自定义递归组件实现

若需完全自定义树形控件，可通过递归组件实现。以下是一个基础实现示例：

<template>
  <div>
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
    ></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        { id: 1, label: '节点1', children: [
          { id: 2, label: '节点1-1' }
        ]}
      ]
    };
  }
};
</script>

在 TreeNode.vue 中递归渲染子节点：

<template>
  <div>
    <div @click="toggle">{{ node.label }}</div>
    <div v-if="isExpanded && node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return { isExpanded: false };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

实现动态加载数据

树形控件常需懒加载数据，可通过 load 方法实现（以 Element UI 为例）：

vue 树形控件实现

<el-tree
  :props="props"
  :load="loadNode"
  lazy
></el-tree>

<script>
export default {
  data() {
    return {
      props: { label: 'name', isLeaf: 'leaf' }
    };
  },
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) {
        const data = await fetchRootNodes();
        resolve(data);
      } else {
        const data = await fetchChildNodes(node.data.id);
        resolve(data);
      }
    }
  }
};
</script>