使用el-select联动

### 实现 `el-select` 组件联动 为了实现两个或多个 `el-select` 下拉框之间的联动效果，通常的做法是在第一个下拉框的选择事件中动态更新第二个下拉框的数据源。下面是一个具体的例子说明如何通过 Vue 和 Element UI 来完成这一功能。 #### HTML 部分 ```html <template> <div class="select-demo"> <!-- 第一个选择器 --> <el-select v-model="provinceValue" placeholder="请选择省份" @change="handleProvinceChange"> <el-option v-for="(item,index) in provinceOptions" :key="index" :label="item.label" :value="item.value"></el-option> </el-select> <!-- 第二个选择器 --> <el-select v-model="cityValue" placeholder="请选择城市"> <el-option v-for="(item,index) in cityOptions" :key="index" :label="item.label" :value="item.value"></el-option> </el-select> </div> </template> ``` #### JavaScript (Vue Component Script) ```javascript <script> export default { name: 'SelectDemo', data() { return { // 初始化省市区数据结构 provincesAndCities: [ { value: 'zj', label: '浙江', cities: [{ value: 'hz', label: '杭州' }, { value: 'nb', label: '宁波'}] }, { value: 'js', label: '江苏', cities: [{ value: 'nj', label: '南京'}, { value: 'sz', label: '苏州'} ] } ], // 当前选中的省份数组索引 provinceIndex: null, // 双向绑定的值 provinceValue: '', cityValue: '', // 动态加载的城市选项列表 provinceOptions: [], cityOptions: [] }; }, methods: { // 根据所选省份更改城市的选项 handleProvinceChange(value){ this.provinceIndex = this.provincesAndCities.findIndex(item => item.value === value); if(this.provinceIndex !== -1){ const selectedProvince = this.provincesAndCities[this.provinceIndex]; this.cityOptions = selectedProvince.cities; this.cityValue = ''; // 清空之前选择的城市 } } }, mounted(){ // 页面初始化时设置初始状态 this.provinceOptions = this.provincesAndCities.map(({ value, label })=>({ value, label })); } }; </script> ``` 上述代码展示了当用户选择了某个省份之后，会触发 `@change` 事件并调用 `handleProvinceChange()` 方法，在该方法内部根据当前选择项去过滤出对应的城市列表，并将其赋给 `cityOptions` 属性从而达到级联的效果[^1]。