Ant Design of Vue a-select下拉框因为数

解决方案：

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

image.png

效果图：

image.png

代码部分：

html:

  <a-select v-model="formData_promql.name" show-search style="width: 300px" option-filter-prop="children"
        :disabled="btnType === 'detail'" @popupScroll="handlePopupScroll" @search="handleSearch"
        @change="handlePromqlChange">
      <a-select-option v-for="item in frontDataZ" :key="item" :value="item">
          {{ item }}
       </a-select-option>
   </a-select>

js:

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

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

(2).methods：

//通过接口获取数据
searchOwnerPromql(name) {
      Http_alarm_rule_promql_list({ envCode: localRead(this.$config.envvalue), resourceType: this.formData.resourceType }).then(res_staff => {
        if (res_staff && res_staff.data && res_staff.data.data && res_staff.data.data.data) {
          let arr = [];
          res_staff.data.data.data.forEach((item) => {
            arr.push(item);
          })
          this.arr_promql = arr;
          this.frontDataZ = arr.slice(0, 100) // 只渲染100条数据
        }
      })
    },

// 搜索的时候执行的方法，val就是输入的时候的内容，可以去后端进行查询数据最后赋值给dataZ或者frontDataZ
handleSearch(val) {
    this.valueData = val
    if (!val) {
    this.searchOwnerPromql()
    } else {
    this.frontDataZ = []
    this.scrollPage = 1
    this.arr_promql.forEach(item => {
        if (item.indexOf(val) >= 0) {
        this.frontDataZ.push(item)
        }
    })
    this.allSearchDataZ = this.frontDataZ
    this.frontDataZ = this.frontDataZ.slice(0, 100) // 只渲染100条数据
    }
}
// 下拉框下滑事件
handlePopupScroll(e) {
    const { target } = e
    const scrollHeight = target.scrollHeight - target.scrollTop
    const clientHeight = target.clientHeight
    // 下拉框不下拉的时候
    if (scrollHeight === 0 && clientHeight === 0) {
    this.scrollPage = 1
    } 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.arr_promql.length > treePageSize) {
        // 如果总数据的条数大于需要展示的数据
        max = treePageSize
        } else {
        // 否则
        max = this.arr_promql.length
        }
        // 判断是否有搜索
        if (this.valueData) {
        this.allSearchDataZ.forEach((item, index) => {
            if (index < max) { // 当data数组的下标小于max时
            newData.push(item)
            }
        })
        } else {
        this.arr_promql.forEach((item, index) => {
            if (index < max) { // 当data数组的下标小于max时
            newData.push(item)
            }
        })
        }
        this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
    }
    }
},