项目场景:
用户进行远程搜索(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}
版权归原作者 顺风水 所有, 如有侵权,请联系我们删除。