多选下拉框中
选中的绑定值已存在
但是,下拉框展开内容被修改过
那么绑定id对应的name从下拉数组中找不到对应值
下拉框会显示 类型1
2
而不是类型1
类型2
为了显示对应的回显文字可以根据下拉框的是否展开动态改变下拉数组
data() {
return {
//下拉选中项是旧数据
selectIds:[1,2],
//下拉框的下拉内容被改变过
flexibleList:[
{
id:1,
name:'类型1'
},
],
//所有的下拉内容
allList:[
{
id:1,
name:'类型1'
},
{
id:2,
name:'类型2'
},
{
id:3,
name:'类型3'
},
],
//下拉框的展开与收拢
selectIsOpen:false,
}
}
dom
<a-select
mode="multiple"
placeholder="请选择拉下类型"
v-model="selectIds"
@dropdownVisibleChange="changeDropdown"
>
<a-select-option v-for="item in tempList()" :key="item.id" :value="item.id">
{{ item.name}}
</a-select-option>
</a-select>
方法
changeDropdown(open){
this.selectIsOpen = open; //selectIsOpen 表示下拉框的展开或者收拢
}
tempList(){
let temp = [];
if(this.selectIsOpen){
temp = this.list
}else{
temp = this.allList
}
return temp;
}