Ant Design of Vue a-select下拉框因為數據量太大造成卡頓的問題

解決方案：

　　最開始渲染時只渲染總數據前100條數據以保證不卡頓，然后當需要搜索的時候對從后台拿到的數據進行過濾，也只取前100條，然后通過select下拉框popupScroll事件，下拉列表滾動時的回調，每次回調時都添加一部分數據來解決下拉框的卡頓問題。

 

Ant Design of Vue 官網文檔事件方法：

 

 

效果圖：

 

代碼部分：

html:

<a-select
    allowClear
    mode="multiple"
    placeholder="歸屬業務"
    style="width: 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