vue使用iview里select组件搜索后选中的数据和下拉列表展示内容不一样

420 阅读1分钟

问题:

1.搜索后回车选中 导致候选列表与当前所选中值不一致 image.png

2.搜索后候选列表展示错误 image.png

2.搜索后候选列表数据紊乱 出现重名 image.png

原代码:

<Select v-model="formData.userName" filterable>
    <Option v-for="item in salesGetUCList"  :value="item.userName" :label="item.userName">
        <span style="width:12rem;display:inline-block;color:#ccc">{{item.userName}}</span>
    </Option>
</Select>

原因是因为在循环时option缺少key 需保证key的值唯一 Option 加上key解决问题

<Option v-for="(item,index) in salesGetUCList" :key="index" :value="item.userName" :label="item.userName">
    <span style="width:12rem;display:inline-block;color:#ccc">{{item.userName}}</span>
</Option>