实现树形菜单vue

实现树形菜单的基本思路

在Vue中实现树形菜单通常需要递归组件和动态数据绑定。树形菜单的核心是父子节点的嵌套关系，每个节点可能有子节点，子节点又可以有自己的子节点。

使用递归组件实现树形菜单

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身，可以轻松处理无限层级的嵌套数据。

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

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

数据结构的定义

树形菜单通常需要一个嵌套的数据结构来表示节点关系。每个节点包含自身信息和子节点数组。

const treeData = [
  {
    id: 1,
    name: '节点1',
    children: [
      {
        id: 2,
        name: '子节点1',
        children: []
      },
      {
        id: 3,
        name: '子节点2',
        children: [
          {
            id: 4,
            name: '孙节点1',
            children: []
          }
        ]
      }
    ]
  }
]

添加展开/折叠功能

为树形菜单添加交互功能，如点击节点展开或折叠子菜单。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <div @click="toggleExpand(item)">
        {{ item.name }}
        <span v-if="item.children && item.children.length">
          {{ item.expanded ? '[-]' : '[+]' }}
        </span>
      </div>
      <tree-menu 
        v-if="item.children && item.children.length && item.expanded" 
        :treeData="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggleExpand(item) {
      if (item.children && item.children.length) {
        this.$set(item, 'expanded', !item.expanded)
      }
    }
  }
}
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用现成的Vue树形组件库，如vue-treeselect或element-ui的树形组件。

安装element-ui：

npm install element-ui

使用el-tree组件：

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

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

样式定制

为树形菜单添加CSS样式，使其更美观。

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
  cursor: pointer;
}

li > div:hover {
  background-color: #f5f5f5;
}

动态加载数据

对于大型树形结构，可以实现懒加载，只在展开节点时加载子节点数据。

methods: {
  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}`,
        hasChildren: node.level < 3
      }))
      resolve(data)
    }, 500)
  }
}

添加复选框功能

为树形菜单添加复选框，允许选择多个节点。

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[1, 2]"
  :default-checked-keys="[3]"
  :props="defaultProps"
/>

性能优化

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

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