vue3 el-select 省市级联

对于 Vue 3 中的省市级联选择，你可以使用 `el-select` 组件和嵌套的 `el-option` 组件来实现。下面是一个简单的示例代码：

<template>
  <div>
    <el-select v-model="selectedProvince" @change="handleProvinceChange">
      <el-option
        v-for="province in provinces"
        :key="province.id"
        :label="province.name"
        :value="province.id"
      ></el-option>
    </el-select>

    <el-select v-model="selectedCity">
      <el-option
        v-for="city in cities"
        :key="city.id"
        :label="city.name"
        :value="city.id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [
        { id: 1, name: '省份1' },
        { id: 2, name: '省份2' },
        // 其他省份...
      ],
      cities: []
    };
  },
  methods: {
    handleProvinceChange() {
      // 根据选择的省份，更新城市列表
      // 你可以使用接口请求或其他方式获取城市列表数据
      // 这里只是简单示意
      if (this.selectedProvince === '1') {
        this.cities = [
          { id: 11, name: '城市1-1' },
          { id: 12, name: '城市1-2' },
          // 其他城市...
        ];
      } else if (this.selectedProvince === '2') {
        this.cities = [
          { id: 21, name: '城市2-1' },
          { id: 22, name: '城市2-2' },
          // 其他城市...
        ];
      } else {
        this.cities = [];
      }
      this.selectedCity = ''; // 清空已选择的城市
    }
  }
};
</script>

在上面的代码中，我们使用了两个 `el-select` 组件，第一个用于选择省份，第二个用于选择城市。当选择省份时，通过 `handleProvinceChange` 方法进行相应的省份切换逻辑，根据选择的省份来更新对应的城市列表，并清空已选择的城市。

请注意，上述代码只是简单示例，你可以根据实际情况进行修改和优化。同时，你需要确保已正确导入和注册 Element Plus 组件库，并在项目中使用了 Vue 3。