vue 实现级联

Vue 实现级联选择器的方法

级联选择器（Cascader）是常见的表单组件，用于处理层级关联数据的选择（如省市区联动）。以下是基于 Vue 2/3 的实现方案：

方案一：使用 Element UI 的 Cascader 组件（Vue 2）

Element UI 提供了开箱即用的级联组件，适合快速集成。

<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' },
            { value: 'city2', label: '城市2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

方案二：使用 Ant Design Vue 的 Cascader（Vue 3）

Ant Design Vue 的级联组件支持更灵活的配置。

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

<script setup>
import { ref } from 'vue';
const selectedOptions = ref([]);
const options = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      { value: 'hangzhou', label: '杭州' }
    ]
  }
];
</script>

方案三：手动实现级联逻辑

若需完全自定义，可通过监听事件和动态加载数据实现。

<template>
  <select v-model="selectedProvince" @change="loadCities">
    <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
  </select>
  <select v-model="selectedCity" :disabled="!cities.length">
    <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      provinces: [{ id: 1, name: '广东' }],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    };
  },
  methods: {
    loadCities() {
      this.cities = [
        { id: 101, name: '广州' },
        { id: 102, name: '深圳' }
      ];
    }
  }
};
</script>

关键注意事项

• 数据格式：级联数据通常为嵌套结构，需包含 value/label 和 children 字段。
• 动态加载：对于大数据量，建议使用 lazy 模式按需加载子级。
• Vue 3 兼容性：若使用 Vue 3，注意组件库的版本兼容性（如 Element Plus 替代 Element UI）。

通过上述方案，可灵活实现不同复杂度的级联选择需求。