当前位置：首页 > VUE

vue实现树组件

2026-03-09 02:16:03VUE

基础树组件实现

使用递归组件实现树形结构，核心是通过组件自身调用自身渲染子节点。

模板部分

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <span @click="toggleExpand(node)">{{ node.label }}</span>
      <tree-component 
        v-if="node.expanded && node.children" 
        :tree-data="node.children"
      />
    </li>
  </ul>
</template>

脚本部分

<script>
export default {
  name: 'TreeComponent',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggleExpand(node) {
      node.expanded = !node.expanded;
    }
  }
};
</script>

动态加载数据

通过异步加载子节点数据实现懒加载，适合大数据量场景。

添加加载方法

methods: {
  async loadChildren(node) {
    if (!node.children) {
      const res = await fetchChildrenData(node.id); // 模拟API调用
      node.children = res.data;
      node.expanded = true;
    }
  }
}

模板调整

<span @click="loadChildren(node)">{{ node.label }}</span>

复选框支持

为每个节点添加复选框，并实现父子级联动。

添加checked状态

props: {
  treeData: {
    type: Array,
    default: () => []
  }
},
methods: {
  toggleCheck(node) {
    node.checked = !node.checked;
    this.updateChildren(node, node.checked);
    this.updateParent(node);
  },
  updateChildren(node, checked) {
    if (node.children) {
      node.children.forEach(child => {
        child.checked = checked;
        this.updateChildren(child, checked);
      });
    }
  }
}

模板增加复选框

<input 
  type="checkbox" 
  v-model="node.checked" 
  @change="toggleCheck(node)"
/>

性能优化

通过虚拟滚动解决大数据量渲染卡顿问题，需配合第三方库如vue-virtual-scroller。

安装依赖

npm install vue-virtual-scroller

示例代码

import { RecycleScroller } from 'vue-virtual-scroller';
components: {
  RecycleScroller
}

调整模板

<RecycleScroller 
  :items="flattenedTreeData" 
  :item-size="32"
>
  <template v-slot="{ item }">
    <div :style="{ paddingLeft: `${item.level * 20}px` }">
      {{ item.label }}
    </div>
  </template>
</RecycleScroller>

自定义节点内容

通过插槽允许用户自定义节点渲染方式，增强灵活性。

定义插槽

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <slot name="node" :node="node">
        <!-- 默认内容 -->
        <span>{{ node.label }}</span>
      </slot>
    </li>
  </ul>
</template>

使用示例

vue实现树组件

<tree-component :tree-data="data">
  <template #node="{ node }">
    <div class="custom-node">
      <i :class="node.icon"></i>
      {{ node.label }}
    </div>
  </template>
</tree-component>