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 的树形组件。

<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'
      }
    }
  }
}
</script>

动态加载数据

对于大型分类树，可以采用懒加载方式，只在展开节点时加载子节点数据。

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

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

      // 模拟异步加载
      setTimeout(() => {
        resolve([{
          name: '子节点',
          leaf: node.level >= 2
        }])
      }, 500)
    }
  }
}
</script>

添加交互功能

为分类树添加展开/折叠、选择、拖拽等交互功能。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    default-expand-all
    draggable
    @check-change="handleCheckChange">
  </el-tree>
</template>

样式定制

通过 CSS 自定义树形结构的外观，使其更符合项目设计。

.el-tree-node__content {
  height: 40px;
  line-height: 40px;
}

.el-tree-node__label {
  font-size: 14px;
  color: #333;
}

数据格式建议

树形数据通常采用以下格式：

[
  {
    id: 1,
    label: '一级分类',
    children: [
      {
        id: 2,
        label: '二级分类',
        children: []
      }
    ]
  }
]

性能优化

对于大型树结构，可以使用虚拟滚动提高性能：

<template>
  <el-tree-v2
    :data="treeData"
    :height="400"
    :props="props"
  />
</template>

以上方法涵盖了 Vue 实现分类树的主要技术方案，可以根据项目需求选择合适的实现方式。