Ant Design of Vue a-select下拉框因为数据量太大造成卡顿的问题

Ant Design of Vue a-select下拉框因为数据量太大造成卡顿的问题

解决方案：

　　最开始渲染时只渲染总数据前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后通过select下拉框popupScroll事件，下拉列表滚动时的回调，每次回调时都添加一部分数据来解决下拉框的卡顿问题。

Ant Design of Vue 官网文档事件方法：

效果图：

代码部分：

html:

<a-select
    allowClear
    mode="multiple"
    placeholder="归属业务"
    style=" 100%"
    :value="sourceOwnerSystems"
    @change="onTreeSelect"
    @popupScroll="handlePopupScroll"
    @search="handleSearch"
  >
    <a-select-option v-for="frontSelect in frontDataZ.filter(item=>item.sourceOwnerSystems)" :key="frontSelect.sourceOwnerSystems"> //过滤一下数据是否为空
      {{ frontSelect.sourceOwnerSystems }}
    </a-select-option>
</a-select>

js:

(1).data中定义变量与数组

data(){
  return {
    dataZ: [],//总数据（不会改变）
    frontDataZ: [], //存放前100的数据
    sourceOwnerSystems: [],
    valueData: '',
    treePageSize: 100,
    scrollPage: 1
  }
}

(2).methods：

//通过接口获取数据
showTabelCiList () {
  listSimpleInfos({sourceOwnerSystems: this.sourceOwnerSystems}).then(res => {
    if (res && res.data) {
      this.dataZ = res.data
      this.frontDataZ = res.data.slice(0, 100)
    }
  }).catch(e => {
    this.$message.error('查询维护信息失败：' + e)
  })
},

handleSearch (val) {
  this.valueData = val
  if (!val) {
    this.showTabelCiList()
  } else {
    this.frontDataZ = []
    this.scrollPage = 1
    this.dataZ.forEach(item => {
      if (item.instanceId.indexOf(val) >= 0) {
        this.frontDataZ.push(item)
      }
    })
    this.allDataZ = this.frontDataZ
    this.frontDataZ = this.frontDataZ.slice(0, 100)
  }
},

//下拉框下滑事件
handlePopupScroll (e) {
  const { target } = e
  const scrollHeight = target.scrollHeight - target.scrollTop
  const clientHeight = target.clientHeight
  // 下拉框不下拉的时候
  if (scrollHeight === 0 && clientHeight === 0) {
    this.scrollPage = 1
    console.log(this.scrollPage)
  } else {
    // 当下拉框滚动条到达底部的时候
    if (scrollHeight < clientHeight + 5) {
      this.scrollPage = this.scrollPage + 1
      const scrollPage = this.scrollPage// 获取当前页
      const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量
      const newData = [] // 存储新增数据
      let max = '' // max 为能展示的数据的最大条数
      if (this.dataZ.length > treePageSize) {
        // 如果总数据的条数大于需要展示的数据
        max = treePageSize
      } else {
        // 否则
        max = this.dataZ.length
      }
      // 判断是否有搜索
      if (this.valueData) {
        this.allDataZ.forEach((item, index) => {
          if (index < max) { // 当data数组的下标小于max时
            newData.push(item)
          }
        })
      } else {
        this.dataZ.forEach((item, index) => {
          if (index < max) { // 当data数组的下标小于max时
            newData.push(item)
          }
        })
      }

      this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
    }
  }
}

官方文档： https://www.antdv.com/components/select-cn/#API

借鉴：https://blog.csdn.net/a82048195/article/details/107632065