0


vue2+element-ui 问题 el-select 远程搜索出现 回显出现ID

项目场景:

用户进行远程搜索(remote-method),第二次搜索(可多次搜索) ,可进行clearable(清空输入框数据) ,数据过多collapse-tags合并,并且数据可以进行多选(multiple).reserve-keyword(多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词)


问题描述

1、出现ID,可能大多用户出现的原因由于 数据类型不符合组件 需要String()转换为字符串,

2、:key="val.value" :value="val.value" :label="val.label+‘’"

3、这边出现的问题主要是与后端(JAVA)交互。


原因分析:

当时与后端(JAVA)交互解决搜索问题,使用的是与后端传递字符串,后端返回includes该字符串的对象,主要是为了搜索方便, 但是使用远程搜索出现了一些问题,到第二次搜索数据会将第一次数据,覆盖,导致第一次的数据ID没有匹配的value 导致最后回显 ID


解决方案:

后端(JAVA)将所有的输入框数据 返回, 前端本地进行数据 filter 回显数据.

this.x.filter(item => {

             return item.label.toLowerCase()

            .indexOf(query.toLowerCase()) > -1;

});

如后端返回数据不是前端所要对象可以 ~ value: item.x label: ${item.x}


本文转载自: https://blog.csdn.net/SzsxXy/article/details/129838462
版权归原作者 顺风水 所有, 如有侵权,请联系我们删除。

“vue2+element-ui 问题 el-select 远程搜索出现 回显出现ID”的评论:

还没有评论