elementui下拉框A选了之后,下拉框B禁用,下拉框B类型,下拉框A禁用
时间: 2024-05-16 08:13:11 浏览: 42
可以通过监听下拉框A的选中事件,在事件处理函数中修改下拉框B的禁用状态和类型,并禁用下拉框A。
示例代码如下:
```html
<template>
<div>
<el-select v-model="selectedA" @change="handleSelectAChange">
<el-option label="A1" value="A1"></el-option>
<el-option label="A2" value="A2"></el-option>
</el-select>
<el-select v-model="selectedB" :disabled="disabledB" :type="typeB">
<el-option label="B1" value="B1"></el-option>
<el-option label="B2" value="B2"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedA: '',
selectedB: '',
disabledB: false,
typeB: '',
};
},
methods: {
handleSelectAChange(value) {
this.selectedA = value;
this.disabledB = true;
this.typeB = 'info';
},
},
};
</script>
```
在上述代码中,`selectedA` 和 `selectedB` 分别是下拉框A和下拉框B的选中值,`disabledB` 和 `typeB` 分别是下拉框B的禁用状态和类型。在 `handleSelectAChange` 方法中,将 `disabledB` 设置为 true,将 `typeB` 设置为 'info',表示禁用并改变下拉框B的类型。
阅读全文