当前位置：首页 > VUE

vue实现树形结构菜单

2026-01-23 08:44:28VUE

实现树形结构菜单的方法

在Vue中实现树形结构菜单通常需要递归组件来处理嵌套数据。以下是实现树形菜单的关键步骤：

数据结构设计

树形菜单的数据通常是一个嵌套结构的数组，每个节点包含子节点信息：

const treeData = [
  {
    id: 1,
    label: 'Parent 1',
    children: [
      {
        id: 2,
        label: 'Child 1',
        children: []
      }
    ]
  }
]

递归组件实现

创建递归组件TreeMenu.vue，通过组件自身调用实现无限层级渲染：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.label }}
      <TreeMenu 
        v-if="item.children && item.children.length" 
        :data="item.children"
      />
    </li>
  </ul>
</template>

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

添加交互功能

扩展组件功能，添加展开/折叠和选中状态：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      <div @click="toggle(item)">
        <span v-if="item.children && item.children.length">
          {{ isExpanded(item) ? '▼' : '►' }}
        </span>
        <span 
          :class="{ 'active': isActive(item) }"
          @click.stop="selectItem(item)"
        >
          {{ item.label }}
        </span>
      </div>
      <TreeMenu 
        v-if="item.children && item.children.length && isExpanded(item)" 
        :data="item.children"
        :selectedId="selectedId"
        @select="selectItem"
      />
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    data: Array,
    selectedId: [Number, String]
  },
  data() {
    return {
      expandedItems: []
    }
  },
  methods: {
    toggle(item) {
      const index = this.expandedItems.indexOf(item.id)
      if (index > -1) {
        this.expandedItems.splice(index, 1)
      } else {
        this.expandedItems.push(item.id)
      }
    },
    isExpanded(item) {
      return this.expandedItems.includes(item.id)
    },
    isActive(item) {
      return this.selectedId === item.id
    },
    selectItem(item) {
      this.$emit('select', item)
    }
  }
}
</script>

样式优化

添加基础样式增强用户体验：

ul {
  list-style: none;
  padding-left: 20px;
}
li {
  margin: 5px 0;
  cursor: pointer;
}
.active {
  font-weight: bold;
  color: #42b983;
}

使用第三方库

对于复杂需求，可以考虑使用现成的树形组件库：

vue-tree-halation：轻量级树形组件
element-ui的el-tree：功能丰富的企业级组件
vuetify的v-treeview：Material Design风格的树组件

安装示例（以element-ui为例）：

npm install element-ui

使用示例：

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

<script>
import { Tree } from 'element-ui'
export default {
  components: { ElTree: Tree },
  data() {
    return {
      treeData: [...],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>