Project scenario:
For example: a drop-down multi-selection box is required in the project, in which there is an all option, if this item is selected, other options are not available
solution:
First of all, you need to add an attribute to el-select
multiple
to make the single selection multi-selectable. At this time, the bound value is actually one数组
instead of a string. We put forward the "all" option separately as a judgment condition. If selected, the attributes of other options will be useddisabled = true
, and other options in the bound value will be清空
Go directly to the code:
<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']
}
}
Reference article: https://blog.csdn.net/lixiaohua66/article/details/113247690