当前位置：首页 > VUE

vue 实现级联

2026-01-12 18:02:45VUE

Vue 实现级联选择

级联选择（Cascader）是一种常见的前端交互组件，通常用于多层级数据的选择（如省市区选择）。以下是基于 Vue 2 和 Vue 3 的实现方法。

使用 Element UI（Vue 2）

Element UI 提供了成熟的 el-cascader 组件，适合快速实现级联选择。

安装 Element UI：

npm install element-ui

示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            { value: 'nanjing', label: '南京' },
            { value: 'suzhou', label: '苏州' }
          ]
        },
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            { value: 'hangzhou', label: '杭州' },
            { value: 'ningbo', label: '宁波' }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

使用 Ant Design Vue（Vue 3）

Ant Design Vue 的 a-cascader 组件支持 Vue 3，功能类似。

安装 Ant Design Vue：

npm install ant-design-vue@next

示例代码：

<template>
  <a-cascader
    v-model:value="selectedOptions"
    :options="options"
    placeholder="请选择"
    @change="handleChange"
  />
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const selectedOptions = ref([]);
    const options = [
      {
        value: 'guangdong',
        label: '广东',
        children: [
          { value: 'guangzhou', label: '广州' },
          { value: 'shenzhen', label: '深圳' }
        ]
      }
    ];

    const handleChange = (value) => {
      console.log(value);
    };

    return { selectedOptions, options, handleChange };
  }
};
</script>

自定义实现级联选择

如果需要完全自定义逻辑，可以通过递归组件实现。

定义数据格式：

const treeData = [
{
 id: 1,
 name: '一级',
 children: [
   { id: 2, name: '二级', children: [{ id: 3, name: '三级' }] }
 ]
}
];

创建递归组件：


<template>
<div>
 <select v-model="selectedLevel1" @change="loadLevel2">
   <option v-for="item in level1" :key="item.id" :value="item.id">
     {{ item.name }}
   </option>
 </select>
 <select v-model="selectedLevel2" @change="loadLevel3" v-if="level2.length">
   <option v-for="item in level2" :key="item.id" :value="item.id">
     {{ item.name }}
   </option>
 </select>
 <select v-model="selectedLevel3" v-if="level3.length">
   <option v-for="item in level3" :key="item.id" :value="item.id">
     {{ item.name }}
   </option>
 </select>
</div>
</template>

export default { data() { return { level1: treeData, level2: [], level3: [], selectedLevel1: null, selectedLevel2: null, selectedLevel3: null }; }, methods: { loadLevel2() { this.level2 = this.level1.find(item => item.id === this.selectedLevel1)?.children || []; this.level3 = []; }, loadLevel3() { this.level3 = this.level2.find(item => item.id === this.selectedLevel2)?.children || []; } } }; ```

动态加载数据

对于大数据量场景，可以通过接口动态加载子级数据（以 Element UI 为例）：

vue 实现级联

<template>
  <el-cascader
    v-model="selectedOptions"
    :props="props"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          const result = await fetch(`/api/regions?parentId=${node.value || ''}`);
          resolve(result.data.map(item => ({
            value: item.id,
            label: item.name,
            leaf: level >= 2
          })));
        }
      }
    };
  }
};
</script>