vue3使用el-Cascader实现城区三级联动

在Vue3中，要使用Element UI的el-Cascader组件实现城区三级联动功能，首先你需要安装Element UI库和Vue3。以下是一个简单的步骤指南：

1. **安装依赖**:
使用npm或yarn安装Element UI：

   npm install element-ui @vue/cli-plugin-element
   # 或者
   yarn add element-ui @vue/cli-plugin-element

2. **配置Element UI**:
如果你使用的是Vue CLI，需要在`vue.config.js`文件中引入并启用Element UI插件：

   module.exports = {
     plugins: [
       ['element-ui', { load: true }]
     ]
   };

3. **在组件中导入并使用el-Cascader**:
在你的组件文件（如`CitySelector.vue`）中，导入Cascader组件：

   <template>
     <el-cascader
       :options="cityOptions"
       v-model="selectedCities"
       placeholder="选择城市"
     ></el-cascader>
   </template>

   <script setup>
   import { ref } from 'vue';
   import { ElCascader } from 'element-plus';

   // 初始化城市选项数据，假设你有一个包含所有城市层级的数据源
   const cityOptions = ref([]); // 假设这是从服务器获取的三级联动数据

   // 当前选中的城市数组
   const selectedCities = ref([]);

   // 省份、城市、区县层级的键名
   const levelKeys = ['province', 'city', 'district'];

   // 设置初始值和联动函数
   async mounted() {
     // 初始化cityOptions，这里示例为静态数据，实际应用中替换为你获取数据的方法
     cityOptions.value = [
       {
         value: '北京',
         label: '北京市',
         children: [
           {
             value: '东城区',
             label: '东城区',
             children: [{ value: '王府井', label: '王府井' }],
           },
           // 其他区域...
         ],
       },
       // 其他省份...
     ];

     // 设置联动逻辑，当用户选择一级城市时，动态加载二级和三级城市
     function loadChildren(level) {
       return cityOptions.value.map(city => ({
         ...city,
         children: city.children ? city.children.filter(c => c[level] === this.selectedCities[level]) : [],
       }));
     }

     // 初始化各级联数据
     await Promise.all(
       levelKeys.map(async (level) => {
         if (levelKeys.length > 1) {
           cityOptions.value = await loadChildren(level);
         }
       })
     );
   }
   </script>

4. **运行组件**:
将这个组件添加到你的Vue3项目中，并在其他地方通过`<app-city-selector>`这样的标签实例化它。