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

在Vue3中结合Element Plus（简称ElPlus）框架，你可以通过`<el-cascader>`组件来实现城区三级联动的选择。以下是基本步骤：

1. **安装依赖**：
首先，在项目中安装Element Plus所需的依赖，如果你还没有安装，可以在`package.json`文件中添加：

   npm install element-plus @vue/cli-plugin-element-plus

2. **引入组件**：
在你的Vue组件中，导入`<el-cascader>`组件：

   <template>
     <el-cascader
       v-model="city"
       :options="citiesData"
       placeholder="请选择城市">
     </el-cascader>
   </template>

这里`v-model`用于双向数据绑定，`:options`属性设置联动数据源。

3. **数据准备**：
定义一个数组结构的数据 `citiesData`，通常包含层级分明的城市信息：

   data() {
     return {
       city: '', // 当前选中的城市
       citiesData: [
         { value: '0', label: '省' },
         ... // 省份列表
         {
           value: '0001',
           label: '市',
           children: [
             ... // 城市列表
             {
               value: '00010001',
               label: '区县'
             }
           ]
         }
       ]
     };
   }

4. **初始化数据**：
初始化时，可以只加载省级数据，然后在用户选择某个省份后，动态获取并显示对应的市区和区县数据。

5. **事件处理**：
如果需要，可以监听`change`事件，以便在用户选择新的层级时执行相应操作：

   methods: {
     handleSelectChange(city) {
       console.log('当前选择的城市:', city);
       // 可在此处更新状态或请求接口获取更详细的信息
     }
   },

6. **模板嵌套**：
为了展示更多的选项，你可以考虑在组件内部嵌套其他元素，如`<el-option>`，但这通常是官方推荐做法之外的额外定制。

记得在实际项目中，你需要根据你的服务器API或数据库查询来填充和管理这个联动数据结构。