首页>>前端>>Vue->element

element

时间:2023-11-29 本站 点击:1

昨天下班时leader说线上有个bug,作者不在让我留下帮忙改一手,虽然从发现问题到解决也就10分钟的事,但我还是在这里记录一下,以免更多的前端同胞入坑

这个项目里的 <el-select> 用到了好多属性:

filterable 可搜索

remote 可远程搜索

remote-method 远程搜索的方法

clearable 可清空选项

multiple 多选

value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填

visible-change 下拉框出现/隐藏时触发

出错的现象是这样的: 搜索ccc并选中,结果回显被选中的名字是aaa,下拉选中的是ccc?! 删改了几个属性发现:点击select下拉框获取全部数据,多选其中几项,ok没问题; 按关键字搜索快速选择所需数据,单选没问题; but !按关键字搜索多选就会发现选中项回显错乱的问题!!!

为什么会这样呢,一切的一切都是因为在 vue 中 v-for 的 key 不要用 index!!!,因为如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素。

我搜索了ccc,当时的下拉选项只剩ccc,它当时的index是0,由于多选的需求,我还要继续选其他选项,所以当下拉选项为全集时,全集中index为0的项就被选中了。这也说明了为什么只是多选时没有问题、单选搜索时也没有问题,因为只有在多选搜索时下拉的全量才会来回变换。

!!!这是错误代码不要学!!!

正确的写法是用 key 绑定唯一标识的键名

<el-selectv-model="form.source"filterableremote:remote-method="remoteMethod"clearablemultiplevalue-key="uid"placeholder="请选择"@visible-change="chgSource"><el-optionv-for="iteminsourceList":key="item.uid":label="item.sourceName":value="item"></el-option></el-select>

好啦~ 今天就先叨叨到这里吧~

如果你也经常使用element-ui 可持续关注,如果本文对你有所帮助,感谢点一颗小心心,您的支持是我继续创作的动力!


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/860.html