解決方案：

最開始渲染時(shí)只渲染總數(shù)據(jù)前100條數(shù)據(jù)以保證不卡頓烦感，然后當(dāng)需要搜索的時(shí)候?qū)暮笈_(tái)拿到的數(shù)據(jù)進(jìn)行過濾次兆，也只取前100條绕德，然后通過select下拉框popupScroll事件，下拉列表滾動(dòng)時(shí)的回調(diào)铐然，每次回調(diào)時(shí)都添加一部分?jǐn)?shù)據(jù)來解決下拉框的卡頓問題爽醋。

Ant Design of Vue 官網(wǎng)文檔事件方法：

效果圖：

代碼部分：

html:

<a-select
    allowClear
    mode="multiple"
    placeholder="歸屬業(yè)務(wù)"
    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"> //過濾一下數(shù)據(jù)是否為空
      {{ frontSelect.sourceOwnerSystems }}
    </a-select-option>
</a-select>

js:

(1).data中定義變量與數(shù)組

data(){
  return {
    dataZ: [],//總數(shù)據(jù)（不會(huì)改變）
    frontDataZ: [], //存放前100的數(shù)據(jù)
    sourceOwnerSystems: [],
    valueData: '',
    treePageSize: 100,
    scrollPage: 1
  }
}

(2).methods：

//通過接口獲取數(shù)據(jù)
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('查詢維護(hù)信息失斠鲜稹：' + 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
  // 下拉框不下拉的時(shí)候
  if (scrollHeight === 0 && clientHeight === 0) {
    this.scrollPage = 1
    console.log(this.scrollPage)
  } else {
    // 當(dāng)下拉框滾動(dòng)條到達(dá)底部的時(shí)候
    if (scrollHeight < clientHeight + 5) {
      this.scrollPage = this.scrollPage + 1
      const scrollPage = this.scrollPage// 獲取當(dāng)前頁
      const treePageSize = this.treePageSize * (scrollPage || 1)// 新增數(shù)據(jù)量
      const newData = [] // 存儲(chǔ)新增數(shù)據(jù)
      let max = '' // max 為能展示的數(shù)據(jù)的最大條數(shù)
      if (this.dataZ.length > treePageSize) {
        // 如果總數(shù)據(jù)的條數(shù)大于需要展示的數(shù)據(jù)
        max = treePageSize
      } else {
        // 否則
        max = this.dataZ.length
      }
      // 判斷是否有搜索
      if (this.valueData) {
        this.allDataZ.forEach((item, index) => {
          if (index < max) { // 當(dāng)data數(shù)組的下標(biāo)小于max時(shí)
            newData.push(item)
          }
        })
      } else {
        this.dataZ.forEach((item, index) => {
          if (index < max) { // 當(dāng)data數(shù)組的下標(biāo)小于max時(shí)
            newData.push(item)
          }
        })
      }

      this.frontDataZ = newData // 將新增的數(shù)據(jù)賦值到要顯示的數(shù)組中
    }
  }
}