iview 的Select控件使用了filterable属性 选择了任意一项后 显示的值前后有很多空格

Question

1. 使用Select的filterable
2. 选中下拉中的任意一项
3. 显示的结果值的前后有很多的空格

<Select 
    v-model="value"
    filterable
>
    <Option 
        v-for="(item, index) in list" 
        :key="index"
        :value="item.value"
    >
        {{ item.name }}
    </Option>
</Select>

Answer 1

自己解答一波

导致原因：

1. {{}} 前后的空格和换行部分被iview读取了
2. 使用的eslint强制标签后内容换行

解决办法：

1. 没有eslint强制换行的可以全掉空格和换行

<Option>{{ item.name }}</Option>

1. 有eslint的,Option赋值采用label

<Select 
    v-model="value"
    filterable
>
    <Option 
        v-for="(item, index) in list" 
        :key="index"
        :value="item.value"
        :label="item.name"
    >
    </Option>
</Select>

Answer 2

用filterable这个属性需要写方法吗？为什么我按照你这样的方式写，它报
TypeError: Cannot read property 'key' of undefined，我设置的key和value都是一个字段，这样写它会报上述错误，我的可选数组里面只有username这个字段。大神，求解答。