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>

使用第三方库

对于复杂的树形结构需求，可以使用成熟的第三方库如 vue-tree-halower 或 element-ui 的树形组件。

安装 element-ui：

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

动态加载数据

对于大数据量的树形结构，可以采用懒加载方式动态获取子节点数据。

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

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '根节点' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          name: '子节点1',
          leaf: true
        }, {
          name: '子节点2'
        }]
        resolve(data)
      }, 500)
    }
  }
}
</script>

自定义样式和功能

可以通过插槽自定义树形节点的显示内容和交互方式。

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    default-expand-all>
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)">
          添加
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

数据格式处理

树形组件通常需要特定格式的数据，可以使用工具函数将扁平数据转换为树形结构。

function buildTree(flatData, idKey = 'id', parentKey = 'parentId') {
  const map = {}
  const roots = []

  flatData.forEach(item => {
    map[item[idKey]] = { ...item, children: [] }
  })

  flatData.forEach(item => {
    const node = map[item[idKey]]
    if (item[parentKey]) {
      map[item[parentKey]].children.push(node)
    } else {
      roots.push(node)
    }
  })

  return roots
}

以上方法涵盖了 Vue 中实现树形结构的主要技术方案，可根据具体项目需求选择合适的方式。递归组件适合简单场景，第三方库提供更多开箱即用的功能，动态加载优化了大数据的性能，自定义插槽则提供了灵活的扩展能力。