<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>
ant-select数据会发生卡顿问题解决
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.