element-ui select 二级联动 在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)...
时间: 2024-03-10 12:45:19 浏览: 11
要实现element-ui select二级联动,可以使用element-ui提供的@change事件和v-model指令。具体步骤如下:
1. 在第一个select中绑定@change事件,当第一个select的值发生变化时,触发这个事件。
2. 在事件处理函数中,将第一个select选中的值赋值给一个变量。
3. 根据第一个select选中的值,过滤出第二个select的可选项。
4. 将第二个select的可选项数组赋值给一个变量,同时将第二个select的v-model指令绑定到一个变量上。
5. 第二个select的可选项和v-model指令都绑定到了变量上,当第一个select的值改变时,第二个select的可选项和v-model指令都会随之改变。
下面是一个示例代码:
```
<template>
<div>
<el-select v-model="selectedProvince" @change="handleProvinceChange">
<el-option v-for="province in provinces" :key="province.value" :label="province.label" :value="province.value"></el-option>
</el-select>
<el-select v-model="selectedCity">
<el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedProvince: '',
selectedCity: '',
provinces: [
{ value: 'beijing', label: '北京' },
{ value: 'shanghai', label: '上海' },
{ value: 'guangzhou', label: '广州' },
{ value: 'shenzhen', label: '深圳' }
],
cities: [
{ value: 'beijing', label: '北京' },
{ value: 'shanghai', label: '上海' },
{ value: 'guangzhou', label: '广州' },
{ value: 'shenzhen', label: '深圳' }
]
}
},
methods: {
handleProvinceChange() {
// 根据选中的省份过滤城市选项
const cities = this.cities.filter(city => city.value.startsWith(this.selectedProvince))
// 将城市选项和v-model指令绑定到变量上
this.selectedCity = ''
this.$nextTick(() => {
this.selectedCity = cities[0].value
})
this.cities = cities
}
}
}
</script>
```
在这个示例中,当第一个select的值发生变化时,会触发handleProvinceChange方法。这个方法会根据选中的省份过滤城市选项,并将城市选项和v-model指令绑定到变量上。由于v-model指令绑定到变量上,当城市选项数组发生变化时,第二个select的选项和值都会随之改变。