可以通过绑定一个同步变量,然后在选择框的change事件中修改这个变量的值,从而实现多个选择框之间的同步选择。

例如,假设有两个el-select选择框,分别是province和city:

<el-select v-model="selectedProvince" @change="onProvinceChange">
  <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option>
</el-select>

<el-select v-model="selectedCity" @change="onCityChange">
  <el-option v-for="city in cities" :key="city" :label="city" :value="city"></el-option>
</el-select>

其中,selectedProvince和selectedCity是同步变量,provinces和cities是选项列表。

然后在methods中定义onProvinceChange和onCityChange方法:

methods: {
  onProvinceChange() {
    // 根据选择的省份动态更新城市列表
    this.cities = getCitiesByProvince(this.selectedProvince);
    // 重置城市选择
    this.selectedCity = '';
  },
  onCityChange() {
    // 根据选择的城市更新其他数据
    // ...
  }
}

这样,在选择省份时会触发onProvinceChange方法,动态更新城市列表和重置城市选择;在选择城市时会触发onCityChange方法,根据选择的城市更新其他数据。通过这种方式可以实现多个选择框之间的同步选择。


原文地址: https://www.cveoy.top/t/topic/bemX 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录