当前位置：首页 > VUE

vue实现下拉层级

2026-03-06 16:40:29VUE

实现下拉层级菜单的基本思路

使用Vue实现下拉层级菜单通常需要结合组件化思想和递归组件，以处理无限层级的嵌套结构。核心是通过数据驱动视图，利用v-for遍历嵌套数据，并通过事件控制展开/折叠状态。

基础组件结构

创建递归组件TreeMenu.vue，通过props接收菜单数据，并动态渲染子菜单：

vue实现下拉层级

<template>
  <ul class="menu">
    <li v-for="item in menuData" :key="item.id">
      <div @click="toggle(item)">
        {{ item.name }}
        <span v-if="item.children">{{ item.expanded ? '-' : '+' }}</span>
      </div>
      <tree-menu 
        v-if="item.children && item.expanded" 
        :menu-data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menuData: Array
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

数据格式示例

菜单数据应为嵌套结构，每个节点包含children字段表示子菜单：

data() {
  return {
    menuItems: [
      {
        id: 1,
        name: 'Level 1',
        expanded: false,
        children: [
          {
            id: 2,
            name: 'Level 2',
            expanded: false,
            children: [
              { id: 3, name: 'Level 3' }
            ]
          }
        ]
      }
    ]
  }
}

样式优化

添加基础CSS实现视觉层级效果，通过缩进和过渡动画增强体验：

vue实现下拉层级

.menu {
  list-style: none;
  padding-left: 20px;
}
.menu li {
  margin: 5px 0;
  transition: all 0.3s;
}
.menu li > div {
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
.menu li > div:hover {
  background-color: #f0f0f0;
}

动态加载优化

对于大数据量场景，可结合v-if和异步加载实现性能优化：

methods: {
  async toggle(item) {
    if (!item.children && item.hasChildren) {
      item.children = await fetchChildren(item.id)
    }
    this.$set(item, 'expanded', !item.expanded)
  }
}