iview的Select组件filterable

<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>