可以使用v-model和watch来实现
多个select的
联动。具体步骤如下：
1. 在模板中定义
多个select，每个
select绑定不同的v-model。
2. 使用watch监听每个v-model的变化，根据变化来更新下一个
select的选项。
下面是一个简单的示例代码：
```
<template>
<div>
<
select v-model="
selectedFirst" @change="onFirstChange">
<option v-for="option in firstOptions" :value="option.value">{{ option.label }}</option>
</
select>
<
select v-model="
selectedSecond" @change="onSecondChange">
<option v-for="option in secondOptions" :value="option.value">{{ option.label }}</option>
</
select>
<
select v-model="
selectedThird">
<option v-for="option in thirdOptions" :value="option.value">{{ option.label }}</option>
</
select>
</div>
</template>
<script>
export default {
data() {
return {
selectedFirst: '',
selectedSecond: '',
selectedThird: '',
firstOptions: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
],
secondOptions: [],
thirdOptions: [],
};
},
watch: {
selectedFirst(value) {
// 根据第一个
select的选项更新第二个
select的选项
switch (value) {
case '1':
this.secondOptions = [
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' },
];
break;
case '2':
this.secondOptions = [
{ label: '选项C', value: 'C' },
{ label: '选项D', value: 'D' },
];
break;
case '3':
this.secondOptions = [
{ label: '选项E', value: 'E' },
{ label: '选项F', value: 'F' },
];
break;
}
this.
selectedSecond = '';
this.
selectedThird = '';
},
selectedSecond(value) {
// 根据第二个
select的选项更新第三个
select的选项
switch (value) {
case 'A':
this.thirdOptions = [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
];
break;
case 'B':
this.thirdOptions = [
{ label: '选项3', value: '3' },
{ label: '选项4', value: '4' },
];
break;
case 'C':
this.thirdOptions = [
{ label: '选项5', value: '5' },
{ label: '选项6', value: '6' },
];
break;
case 'D':
this.thirdOptions = [
{ label: '选项7', value: '7' },
{ label: '选项8', value: '8' },
];
break;
case 'E':
this.thirdOptions = [
{ label: '选项9', value: '9' },
{ label: '选项10', value: '10' },
];
break;
case 'F':
this.thirdOptions = [
{ label: '选项11', value: '11' },
{ label: '选项12', value: '12' },
];
break;
}
this.
selectedThird = '';
},
},
methods: {
onFirstChange() {
// 第一个
select的change事件
},
onSecondChange() {
// 第二个
select的change事件
},
},
};
</script>
```
在这个示例中，第一个
select的选项改变时会触发watch中的
selectedFirst方法，然后根据选项更新第二个
select的选项。第二个
select的选项改变时会触发watch中的
selectedSecond方法，然后根据选项更新第三个
select的选项。同时，每个
select都绑定了自己的v-model，当选项改变时会更新对应的v-model值。
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
