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}`