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: {
      type: Array,
      required: true
    }
  }
}
</script>

动态组件加载

通过动态组件加载树状结构节点，适用于需要按需加载或动态渲染的场景。

<template>
  <div>
    <component
      :is="node.type"
      v-for="node in nodes"
      :key="node.id"
      :node="node"
    ></component>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <div>
          <span>{{ node.name }}</span>
          <tree-node v-if="node.children" :node="node"></tree-node>
        </div>
      `
    }
  }
}
</script>

第三方库集成

使用成熟的第三方库如 vue-tree-halower 或 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>

扁平数据转树形结构

将扁平数据转换为树形结构，适用于从后端获取的扁平化数据。

function flatToTree(flatData, parentId = null) {
  return flatData
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: flatToTree(flatData, item.id)
    }))
}

虚拟滚动优化

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

<template>
  <virtual-list
    :size="30"
    :remain="10"
    :data="flattenTreeData"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </virtual-list>
</template>

事件处理与交互

实现节点展开/折叠、选中状态管理等交互功能。

methods: {
  toggleExpand(node) {
    this.$set(node, 'expanded', !node.expanded)
  },
  handleSelect(node) {
    this.selectedNode = node
  }
}

以上方法可根据具体需求选择或组合使用，灵活应对不同场景下的树状结构实现需求。