解决antd的select下拉框因为数据量太大造成卡顿的问题

解决antd的select下拉框因为数据量太大造成卡顿的问题

现在实现了滚动加载功能和模糊查询功能，但表单的编辑回显出现了问题，显示的是id,原因是后端返回的数据但是在已经加载的列表中还未加载。问了前端大哥，它提供了一种思路，就是把后端返回数据造成现在列表数据的形式，然后在滚动加载的时候每次先把后端返回的数据过滤掉，然后再push进去，也就是说每次加载都要先判断一下编辑会显的数据在不在这次要push的数据中，emm，所以改实现方式了！但是，现在的滚动加载和模糊查询是实现了的。唉，要推翻重写了，记录一下。

 <a-form-item label="管辖食堂" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-select
                mode="multiple"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                @popupScroll="handlePopupScroll"
                :autoClearSearchValue="true"
                @search="filterOpts"
                @blur="handleloseBlur"
                v-decorator="['Merchans']"
                :filterOption="filterOption"
                :not-found-content="fetching ? undefined : null"
              >
                <a-spin v-if="fetching" slot="notFoundContent" size="default" />
                <a-select-option v-for="(item,index) in merchanList" :key="index" :value="item.Id">
                  {{
                  item.Text
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>

 data() {
    return {
      merchanList: [], // 管辖食堂信息
      pageNum: 0, //起始条数
      query: '', //管辖食堂模糊查询关键字
      fetching: false, //加载状态
    }
  },
  // 组件创建后处理
  created() {
    this.loadMerchan()
  },

 //失去焦点的回调
    handleloseBlur() {
      this.query = ''
      this.pageNum = 0
      this.merchanList = []
      this.loadMerchan()
    },
    // 文本框值变化时回调
    filterOpts(val) {
      console.log(val)
      this.query = val
      if (this.query) {
        this.merchanList = []
        this.pageNum = 0
        this.fetching = true
        this.loadMerchan()
        this.fetching = false
        // console.log(this.merchanList)
      }
    },
    // 滚动实时刷新数据
    handlePopupScroll(e) {
      const { target } = e
      // scrollHeight：代表包括当前不可见部分的元素的高度
      // scrollTop：代表当有滚动条时滚动条向下滚动的距离，也就是元素顶部被遮住的高度
      // clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度（正文）
      const rmHeight = target.scrollHeight - target.scrollTop
      const clHeight = target.clientHeight
      // 当下拉框失焦的时候，也就是不下拉的时候
      if (rmHeight === 0 && clHeight === 0) {
        this.pageNum = 0
      } else {
        // 当下拉框下拉并且滚动条到达底部的时候
        // 可以看成是分页，当滚动到底部的时候就翻到下一页
        if (rmHeight < clHeight + 1) {
          this.pageNum += 10
          //调用处理数据的函数增加下一页的数据
          if (this.pageNum < this.data.total) {
            this.loadMerchan()
          }
        }
      }
    },
    //获取管辖食堂下拉列表
    loadMerchan() {
      var that = this
      this.requestGet('/Merchan/GetPaggingList', {
        query: this.query,
        start: this.pageNum,
        limit: 10,
      }).then((res) => {
        that.data = res.data
        if (that.merchanList.length <= that.data.total) {
          console.log(res.data.items)
          that.merchanList.push(...res.data.items)
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },