element-ui Select单选切换多选,单选的选项还在,清空value也清理不掉处理方案:
直接上代码:
<template>
<div>
<el-select
v-model="value"
:multiple="multipleType"
filterable
allow-create
default-first-option
placeholder="请选择文章标签"
v-if="show"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary" @click="changeType">{{
multipleType ? "多选" : "单选"
}}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
multipleType: true,
options: [
{
value: "HTML",
label: "HTML",
},
{
value: "CSS",
label: "CSS",
},
{
value: "JavaScript",
label: "JavaScript",
},
],
value: [],
};
},
methods: {
changeType() {
this.multipleType = !this.multipleType;
this.value = this.multipleType ? [] : "";
// 方案一:
this.show = false;
setTimeout(() => {
this.show = true;
});
},
},
watch: {
// 方案二:
value() {
this.show = false;
setTimeout(() => {
this.show = true;
});
},
},
};
</script>
思路: 利用v-if重新加载,setTimeout防止diff算法不生效。
缺点: 每次切换选择框会闪一次,影响局部体验。