vue实现树状结构

Vue 实现树状结构的方法

递归组件实现

使用 Vue 的递归组件特性可以轻松实现树状结构。定义一个组件，该组件在其模板中调用自身。

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

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

动态加载数据

对于大型树状结构，可以采用动态加载数据的方式优化性能。只有当用户展开节点时才加载子节点数据。

<template>
  <ul>
    <li v-for="item in visibleData" :key="item.id" @click="toggleExpand(item)">
      {{ item.name }}
      <span v-if="item.children && !item.expanded">+</span>
      <span v-if="item.children && item.expanded">-</span>
      <tree-node 
        v-if="item.expanded && item.children" 
        :treeData="item.children"
      ></tree-node>
    </li>
  </ul>
</template>

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

使用第三方库

Vue生态中有许多成熟的树状组件库，如：

• vue-tree-list：功能丰富的树形组件
• element-ui的el-tree：Element UI提供的树组件
• iview的Tree组件：iView框架中的树形控件

以element-ui为例：

<el-tree
  :data="treeData"
  :props="defaultProps"
  @node-click="handleNodeClick"
></el-tree>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

自定义节点内容

可以通过插槽自定义每个节点的渲染内容，实现更灵活的UI表现。

<el-tree
  :data="treeData"
  :props="defaultProps"
>
  <span slot-scope="{ node, data }" class="custom-node">
    <span>{{ node.label }}</span>
    <span v-if="node.level === 1" class="custom-action">
      <el-button size="mini" @click="append(data)">添加</el-button>
    </span>
  </span>
</el-tree>

虚拟滚动优化

对于超大型树结构，实现虚拟滚动可以大幅提升性能。

<virtual-tree
  :data="bigTreeData"
  :item-size="32"
  :height="500"
>
  <template v-slot="{ item }">
    <div>{{ item.label }}</div>
  </template>
</virtual-tree>

状态管理

当树状结构需要跨组件共享状态时，可以使用Vuex进行集中管理。

// store.js
export default new Vuex.Store({
  state: {
    treeData: []
  },
  mutations: {
    updateTreeData(state, payload) {
      state.treeData = payload
    }
  }
})

拖拽功能

实现树节点的拖拽排序功能可以增强交互体验。

<vue-draggable-nested-tree
  :value="treeData"
  @input="updateTree"
  :draggable="true"
></vue-draggable-nested-tree>

以上方法可以根据具体需求选择使用，递归组件适合简单场景，第三方库提供更多开箱即用的功能，虚拟滚动优化大型数据集的性能，状态管理解决复杂应用的数据共享问题。