当前位置：首页 > VUE

vue实现级联菜单

2026-03-09 04:09:51VUE

Vue 实现级联菜单的方法

使用 Element UI 的 Cascader 组件

安装 Element UI 后，可以直接使用其提供的 Cascader 组件实现级联菜单功能。Element UI 的 Cascader 支持动态加载、多选、搜索等功能。

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: '省份1',
          children: [
            {
              value: 'city1',
              label: '城市1'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

自定义递归组件实现

如果需要更灵活的定制，可以通过递归组件的方式手动实现级联菜单。创建一个可递归调用的子菜单组件，根据数据动态渲染层级结构。

<template>
  <div class="cascader-menu">
    <div
      v-for="item in options"
      :key="item.value"
      @mouseenter="showChildren(item)"
    >
      {{ item.label }}
      <div v-if="item.children && activeItem === item" class="sub-menu">
        <cascader-menu :options="item.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CascaderMenu',
  props: {
    options: Array
  },
  data() {
    return {
      activeItem: null
    }
  },
  methods: {
    showChildren(item) {
      this.activeItem = item
    }
  }
}
</script>

使用第三方库 vue-cascader

vue-cascader 是一个专门为 Vue 设计的级联选择器组件，提供了丰富的配置选项和事件支持。

安装：

npm install vue-cascader

使用示例：

<template>
  <vue-cascader
    :options="options"
    v-model="selectedValues"
    :props="props"
  />
</template>

<script>
import VueCascader from 'vue-cascader'

export default {
  components: {
    VueCascader
  },
  data() {
    return {
      selectedValues: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      options: [
        {
          id: 1,
          name: '一级菜单',
          children: [
            {
              id: 2,
              name: '二级菜单'
            }
          ]
        }
      ]
    }
  }
}
</script>

动态加载数据实现

对于数据量大的场景，可以采用动态加载的方式，只有当用户展开某一级时才加载对应数据。

<template>
  <el-cascader
    :props="props"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(item => ({
                value: ++id,
                label: `选项${id}`,
                leaf: level >= 2
              }))
            resolve(nodes)
          }, 1000)
        }
      }
    }
  }
}
</script>

样式定制技巧

级联菜单的样式可以通过以下方式定制：

/* 修改 Element UI Cascader 样式 */
.el-cascader-menu {
  min-width: 200px;
}

.el-cascader-menu__item {
  padding: 8px 20px;
}

/* 自定义组件的样式 */
.cascader-menu {
  position: relative;
  display: inline-block;
}

.sub-menu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  border: 1px solid #ddd;
}