elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？_java

如果有同学还没用过这个功能，可以先了解下：

使用场景

大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。

解决方法

现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档

如果你使用的是 Vue2，很可惜没有现成的组件能够使用。解决方法一共两个，都是需要后端配合前端进行修改的：

后端将接口改为分页的形式；前端将选择器下拉框中的数据改为滚动加载
后端将接口改为模糊搜索的形式，通过选择器中输入的内容去搜索模糊匹配的数据然后返回；前端使用 elementUI 中选择器的远程搜索功能，用户在选择器输入内容后才发起请求

本次主要讲解使用远程搜索来解决的方法，前端代码就直接放出了，不过多解释：

<el-select ref="selectDom" v-model="form.diagnosisIds" :remote-method="remoteMethod" placeholder="请选择" clearable filterable multiple remote @visible-change="templateTagChange">
  <el-option
    v-for="item in relationList"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
el-select>

<script>
export default {
  data: {
  	return {
  	  form: {
        diagnosisIds: [] // v-model 中绑定的值
      },
      relationList: [] // 下拉框的数据
    }
  },
  methods: {
    // 远程搜索方法，数据太多，不能直接渲染
    remoteMethod(query) {
      if (query !== '') {
        this.relationList = []
        this.loading = true
        // 这个方法可以做下节流处理，不需要一输入就发起请求，这里偷懒没有写
        getDiagnoseInfo({ diagnoseName: query }).then(res => {
          this.loading = false
          this.relationList = res.filter(item => {
            return item.name.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        })
      } else {
        this.relationList = []
      }
    },
    // 诊断选择器下拉框隐藏时触发事件，清空数据
    templateTagChange(val) {
      if (val === false) {
        this.relationList = []
      }
    }
  }
}
script>

带来的问题

之前直接赋值选择器选项的时候，因为页面加载完选择器的选项就有内容了，所以数据回显的时候一般后端返回id，选择器会自动匹配选项中那一项id对应的name值并回显。但是现在使用远程搜索，页面刚加载完用户不在选择器输入的话，选择器选项一直都是空的，自然也无法进行匹配回显。你会发现这时候只是id回显到选择器中，并不是回显id所匹配的name。那么该怎么解决呢？

如何解决回显问题

首先需要后端配合改一下接口，原本的接口是返回id的字符串，现在需要后端那边匹配一下对应id的name，然后返回id与name的集合，形如 { id: 1, name: 'xxx' }；然后前端这里有两种解决方法：

1. 给选择器选项赋值

既然是因为选择器选项为空无法进行匹配回显，那就在页面加载完后给选择器选项赋值就好了：

const ids = [] // 专门用来存放选项id的数据
const strs = [] // 专门用来存放选项name的数据
// res.tagMapList 为接口返回的id与name的集合数据
res.tagMapList.forEach(ele => {
  ids.push(ele.id)
  strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {
  this.form.diagnosisIds.push(ids[i]) // 给选择器v-model赋值，由于是支持多选的，所以会是一个数据
  // 给选择器的选项赋值，接可以自己匹配上name了
  this.relationList.push({
    id: ids[i],
    name: strs[i]
  })

效果如下：

会发现确实成功回显name了，但是当鼠标聚焦在选择器上且未发起远程搜索时，这个下拉框会出现这几项的值（理所应当的问题，因为给选项赋了这几个值嘛，但是在未发起远程搜索之前是不需要这个下拉框的）

2. 使用源码中的 cachedOptions 方法隐藏下拉框中的内容

有兴趣的可以自行查阅elementUI这部分的源码，简而言之就是源码中是利用cachedOptions方法将当前的下拉选项隐匿储存的集合，那我们可以通过在这个集合中把我们需要显示的选项添加进去

放出代码：

const ids = []
const strs = []
res.tagMapList.forEach(ele => {
  ids.push(ele.id)
  strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {
  this.form.diagnosisIds.push(ids[i])
  this.$refs.selectDom.cachedOptions.push({
    currentLabel: strs[i],
    currentValue: ids[i],
    label: strs[i],
    value: ids[i]
  })
}