プロジェクトのシナリオ:
例: プロジェクトにはドロップダウンの複数選択ボックスが必要です。このボックスには [すべて] オプションがあり、この項目が選択されている場合、他のオプションは使用できません。
解決:
まず、単一選択を複数選択可能にするために el-select に属性を追加する必要がありますが
multiple
、このときのバインド値は実際には数组
文字列ではなく 1 になります。判定条件として「すべて」オプションを別途提示します。選択すると、他のオプションのプロパティが使用され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