项目场景:
例如:项目中需要一个下拉多选框,其中有一个全部选项,若选中该项其他不可选
解决方案:
首先,需要给 el-select 添加
multiple
属性,让单选变为可多选,这时,绑定的值其实是一个数组
而不再是字符串。我们把“全部”选项单独提出来,作为判断条件,若选中,则其他选项的属性disabled = true
,并将绑定的值中的其他选项清空
直接上代码:
<el-select
v-model="method"
multiple
:placeholder="请选择"
@change="hideOther()"
>
<el-option
key="-1"
label="全部"
value="all"
/>
<el-option
v-for="(item, i) in methods"
:key="i"
:label="item.label"
:value="item.value"
/>
</el-select>
hideOther() {
// 数组的indexOf方法,会返回当前值在数组中的下标,没有则为-1
if (this.method.indexOf('all') === -1) {
this.methods.map((item) => {
item.disabled = false
})
} else {
this.methods.map((item) => {
item.disabled = true
})
this.method = ['all']
}
}
参考文章: https://blog.csdn.net/lixiaohua66/article/details/113247690