vue 实现树组件

Vue 树形组件实现

基础树形结构实现

使用递归组件实现树形结构，核心是通过组件自身调用自身渲染嵌套数据。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.label }}
      <tree-node v-if="node.children" :treeData="node.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  }
}
</script>

动态展开/折叠功能

通过添加展开状态控制子节点显示，结合CSS过渡效果提升用户体验。

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

<script>
export default {
  methods: {
    toggleExpand(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

复选框选择功能

实现单选、多选和级联选择功能，需要处理父子节点间的选中状态联动。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <input 
        type="checkbox" 
        v-model="node.checked"
        @change="handleCheckChange(node)">
      {{ node.label }}
      <tree-node 
        v-if="node.children && node.expanded" 
        :treeData="node.children"
        @check-change="propagateCheckChange">
      </tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleCheckChange(node) {
      this.$emit('check-change', node)
    },
    propagateCheckChange(node) {
      this.$emit('check-change', node)
    }
  }
}
</script>

异步加载子节点

当数据量较大时，实现按需加载子节点功能。

methods: {
  loadChildren(node) {
    if (!node.childrenLoaded) {
      api.getChildren(node.id).then(children => {
        this.$set(node, 'children', children)
        this.$set(node, 'childrenLoaded', true)
      })
    }
    this.toggleExpand(node)
  }
}

拖拽排序功能

通过HTML5拖拽API实现节点拖拽排序。

handleDragStart(e, node) {
  e.dataTransfer.setData('text/plain', node.id)
},
handleDrop(e, parentNode) {
  const nodeId = e.dataTransfer.getData('text/plain')
  // 实现节点移动逻辑
}

性能优化建议

对于大型树结构，采用虚拟滚动技术优化渲染性能。

// 使用vue-virtual-scroll-list等第三方库
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  }
}

样式定制技巧

通过CSS变量和插槽实现主题定制。

.tree-node {
  --indent: 20px;
  --icon-color: #666;
}

.tree-node li {
  padding-left: var(--indent);
}

完整实现可参考Element UI的Tree组件或Ant Design Vue的Tree组件设计，这些成熟组件库提供了丰富的API和功能示例。实际开发中可根据项目需求选择合适的技术方案，平衡功能完整性和性能要求。