当前位置：首页 > VUE

vue实现下拉层级

2026-01-07 03:54:04VUE

Vue实现下拉层级菜单

使用Vue实现下拉层级菜单可以通过递归组件或动态渲染的方式完成。以下是两种常见实现方法：

递归组件实现

创建一个递归组件处理多级菜单结构：

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

<script>
export default {
  name: 'TreeMenu',
  props: ['menuData'],
  methods: {
    toggle(item) {
      item.expand = !item.expand
    }
  }
}
</script>

动态渲染实现

通过v-for和条件渲染实现层级结构：

vue实现下拉层级

<template>
  <div>
    <div 
      v-for="item in menuData" 
      :key="item.id"
      :style="{ paddingLeft: level * 10 + 'px' }"
    >
      <div @click="toggle(item)">
        {{ item.name }}
        <span v-if="item.children">
          {{ item.expand ? '▼' : '►' }}
        </span>
      </div>
      <tree-menu 
        v-if="item.children && item.expand"
        :menu-data="item.children"
        :level="level + 1"
      />
    </div>
  </div>
</template>

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

使用第三方组件库

对于快速实现，可以使用现成的UI组件库：

Element UI

<el-cascader
  :options="options"
  :props="{ expandTrigger: 'hover' }"
></el-cascader>

Ant Design Vue

vue实现下拉层级

<a-cascader
  :options="options"
  placeholder="请选择"
/>

动画效果增强

为下拉菜单添加过渡动画：

<template>
  <transition name="slide">
    <ul v-show="isOpen">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </transition>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

数据格式示例

推荐使用以下结构组织菜单数据：

menuData: [
  {
    id: 1,
    name: '一级菜单',
    children: [
      {
        id: 2,
        name: '二级菜单',
        children: [
          { id: 3, name: '三级菜单' }
        ]
      }
    ]
  }
]