有两个el-select,如何改变一个el-select的值来改变另一个el-select的值
时间: 2023-11-29 17:47:23 浏览: 214
详解如何修改el-select的样式:popper-append-to-body和popper-class
为了改变一个el-select的值来改变另一个el-select的值,你需要在代码中分别绑定不同的值。这样,当你改变一个el-select的值时,另一个el-select的值不会随之改变。以下是一个示例代码:
```html
<template>
<div>
<el-select v-model="selectedValue1">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="selectedValue2">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
],
selectedValue1: '',
selectedValue2: ''
};
},
watch: {
selectedValue1(newValue) {
this.selectedValue2 = newValue;
},
selectedValue2(newValue) {
this.selectedValue1 = newValue;
}
}
};
</script>
```
在上面的代码中,我们使用了Vue的watch属性来监听selectedValue1和selectedValue2的变化。当selectedValue1的值发生变化时,我们将其值赋给selectedValue2,反之亦然。这样,当你改变一个el-select的值时,另一个el-select的值也会随之改变。
阅读全文