ant-select數據會發生卡頓問題解決

        <a-select
          v-model="form.region"
          show-search
          placeholder="請選擇"
          option-filter-prop="children"
          @search="handleSearch"
          @popupScroll="handlePopupScroll"
        >
          <a-select-option
            v-for="item in renderedPorjectList"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}</a-select-option
          >
        </a-select>
<script>
import { getProjectsQ } from "@/api/market";
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      form: {},
// 當前頁
      current: 1,
      // 每頁多少條
      pageSize: 10,
      // 所有的數據
      porjectList: [],
      // 符合條件的數據
      searchPorjectList: [],
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(this.porjectList.length / this.pageSize);
    },
    // 展示在下拉框的數據
    renderedPorjectList() {
      return this.searchPorjectList.slice(0, this.pageSize * this.current);
    },
  },
  created() {
this.getProjectsQList();
  },
  methods: {
    handleSearch(value) {
      this.searchPorjectList = this.porjectList.filter((item) =>
        item.name.includes(value)
      );
    },
    // 滾動時觸發
    handlePopupScroll: debounce(function () {
      if (this.totalPage >= this.current + 1) {
        this.current = this.current + 1;
      }
    }, 400),
    getProjectsQList() {
      getProjectsQ().then((res) => {
        this.porjectList = res.data;
        this.searchPorjectList = this.porjectList;
      });
    },
};
</script>