vue2中怎么在三个el-select中做选中一个且上次选中的取消选中
时间: 2024-05-04 15:18:49 浏览: 122
你可以在每个 `el-select` 上绑定一个 `change` 事件,然后在该事件中使用 `this.$refs` 获取到其他两个 `el-select` 的实例,然后分别将它们的选中项设为 `null`,实现上次选中的取消选中。具体代码如下:
```html
<template>
<div>
<el-select v-model="selected1" @change="handleChange">
<el-option label="Option 1-1" value="1-1"></el-option>
<el-option label="Option 1-2" value="1-2"></el-option>
</el-select>
<el-select v-model="selected2" ref="select2" @change="handleChange">
<el-option label="Option 2-1" value="2-1"></el-option>
<el-option label="Option 2-2" value="2-2"></el-option>
</el-select>
<el-select v-model="selected3" ref="select3" @change="handleChange">
<el-option label="Option 3-1" value="3-1"></el-option>
<el-option label="Option 3-2" value="3-2"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selected1: '',
selected2: '',
selected3: '',
}
},
methods: {
handleChange() {
// 获取其他两个 el-select 的实例
const select2 = this.$refs.select2[0];
const select3 = this.$refs.select3[0];
// 分别将它们的选中项设为 null
select2.clear();
select3.clear();
},
},
};
</script>
```
在上面的代码中,我们定义了三个 `el-select`,它们分别绑定了 `selected1`、`selected2`、`selected3` 三个变量。当任意一个 `el-select` 的选中项发生变化时,`handleChange` 方法会被调用,然后我们通过 `this.$refs` 获取到其他两个 `el-select` 的实例,再分别将它们的选中项设为 `null`,这样就可以实现上次选中的取消选中了。
阅读全文