<FormItem label="国家">
<Select v-model="country" ref="sel" filterable>
<Option v-for="item of countryList" :value="item.name" :key="item.id" >
{{item.name}}
</Option>
</Select>
</FormItem>
使用可搜索属性 filterable 后的问题
一、改变countryList值时会保留前一个countryList选中的选项
解决方式:
1、如果每个countryList中的:key绑定的值不重复,问题解决,可以设置:key是唯一的值
2、每次改变countryList值之前,清空当前Select的选项
this.$refs.sel.clearSingleSelect()
3、每次改变countryList值之前,清空当前Select选中的数据
let query = this.$refs['sel'].$data.query;
if (query) {
//赋值为空
this.$refs['sel'].$data.query = ''
}
二、重复选择已选的选项,选项显示的位置会变化
选择中国后,再选一次中国如下图
尚未解决。。。
20190605 补充
原因找到了,
<Option v-for="item of countryList" :value="item.name" :key="item.id" >
{{item.name}}
</Option>
重复选择时 {{item.name}} 左右的空格被写进了选项里,去掉 {{item.name}} 左右的空格,问题解决
<Option v-for="item of countryList" :value="item.name">{{item.name}}</Option>