vue 实现树选项

实现树形结构的核心方法

使用 el-tree 组件（Element UI）快速构建树形选择器：

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  :props="defaultProps">
</el-tree>

data() {
  return {
    treeData: [{
      id: 1,
      label: '一级节点',
      children: [{
        id: 2,
        label: '二级节点'
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  }
}

递归组件实现方案

自定义递归组件适合需要高度定制化的场景：

<tree-node :node="rootNode" @select="handleSelect"/>

// TreeNode.vue
<template>
  <div>
    <div @click="toggle">
      {{ node.label }}
    </div>
    <div v-show="isOpen" v-for="child in node.children">
      <tree-node :node="child"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return { isOpen: false }
  },
  methods: {
    toggle() { this.isOpen = !this.isOpen }
  }
}
</script>

数据格式处理技巧

扁平数据转树形结构的通用方法：

function buildTree(flatData) {
  const map = {}
  const roots = []

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

  flatData.forEach(item => {
    if (item.parentId && map[item.parentId]) {
      map[item.parentId].children.push(map[item.id])
    } else {
      roots.push(map[item.id])
    }
  })

  return roots
}

性能优化建议

大数据量时采用虚拟滚动：

<el-tree
  :data="largeData"
  :height="400"
  virtual
  :props="defaultProps">
</el-tree>

事件处理示例

实现节点选择与展开回调：

methods: {
  handleNodeClick(data) {
    console.log('选中节点:', data)
  },
  handleNodeExpand(data) {
    console.log('展开节点:', data)
  }
}