vue antd 下拉框卡顿懒加载优化

<template>
    <a-select
      allowClear
      mode="multiple"
      placeholder="归属业务"
      style="width: 100%"
      @change="onTreeSelect"
      @popupScroll="handlePopupScroll"
      @search="handleSearch"
    >
      <a-select-option
        v-for="(item, index) in frontDataZ"
        :key="index"
        :value="item"
      >
        {{ item }}
      </a-select-option>
    </a-select>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dataZ: [], //总数据（不会改变）
        frontDataZ: [], //存放前100的数据
        valueData: "",
        treePageSize: 100,
        scrollPage: 1,
      };
    },
    created() {
      for (let index = 0; index < 100000; index++) {
        this.dataZ.push("aaa" + index);
        this.frontDataZ = this.dataZ.slice(0, 100);
      }
    },
    methods: {
      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) {
        debugger
        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;
            }
            this.dataZ.forEach((item, index) => {
              if (index < max) {
                // 当data数组的下标小于max时
                newData.push(item);
              }
            });
            this.frontDataZ = newData; // 将新增的数据赋值到要显示的数组中
          }
        }
      },
    },
  };
  </script>
  
  <style>
  </style>