vue 树形菜单实现

Vue 树形菜单实现方法

递归组件实现

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身实现无限层级嵌套。

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

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以考虑使用成熟的第三方组件库：

• element-ui的el-tree
• ant-design-vue的a-tree
• vuetify的v-treeview

以element-ui为例：

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

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

动态加载数据

对于大数据量场景，可以实现懒加载：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根节点' }])
  }
  if (node.level > 3) return resolve([])

  setTimeout(() => {
    const data = Array.from({ length: 5 }).map((_, i) => ({
      name: `节点${node.level}-${i}`,
      leaf: node.level >= 2
    }))
    resolve(data)
  }, 500)
}

自定义样式和交互

通过CSS可以自定义树形菜单的外观：

.tree-node {
  padding: 5px 10px;
  cursor: pointer;
}
.tree-node:hover {
  background-color: #f5f5f5;
}
.tree-children {
  padding-left: 20px;
}

功能增强

实现常见功能如：

• 复选框选择
• 节点展开/折叠
• 拖拽排序
• 搜索过滤
• 右键菜单

示例实现搜索过滤：

filterNode(value, data) {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}

性能优化

对于大型树结构：

• 使用虚拟滚动
• 实现节点懒加载
• 避免不必要的重新渲染

export default {
  shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props.node, nextProps.node)
  }
}