vue2中基于el-select封装一个懒加载下拉框

需求

当下拉选项的数据量过大时，后端接口是分页格式返回数据。

解决方案

自定义封装一个懒加载下拉组件，每次滚动到底部时自动获取下一页数据，这样可有效防止数据量过大时造成组件卡顿。

具体实现步骤

1、创建懒加载下拉选择组件

<template><el-selectv-model="innerValue":placeholder="placeholder":clearable="clearable":filterable="filterable":disabled="disabled"@change="handleChange"@visible-change="handleVisibleChange"@search="handleSearch"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option><divv-if="loading"class="loading-more"style="text-align: center; padding: 10px 0;"><i class="el-icon-loading"></i></div><divv-if="!loading && hasMore"class="loading-more"style="text-align: center; padding: 10px 0;"><span>加载更多...</span></div></el-select>
</template><script>
export default {name: "LazyLoadSelect",props: {value: {type: [String, Number],default: "",},placeholder: {type: String,default: "请选择",},clearable: {type: Boolean,default: true,},filterable: {type: Boolean,default: true,},disabled: {type: Boolean,default: false,},fetchData: {type: Function,required: true,},},data() {return {innerValue: this.value,options: [],loading: false,hasMore: true,currentPage: 1,pageSize: 20,searchKeyword: "",handleScroll: null,};},watch: {value: {handler(val) {this.innerValue = val;},immediate: true,},},methods: {handleChange(value) {this.$emit("input", value);let label = this.options.find((item) => item.value === value).label;this.$emit("change", {value,label,});},async handleVisibleChange(visible) {if (visible) {// 下拉框打开时重置数据this.currentPage = 1;this.options = [];this.hasMore = true;await this.loadData();}},async handleSearch(query) {this.searchKeyword = query;this.currentPage = 1;this.options = [];this.hasMore = true;await this.loadData();},async loadData() {if (this.loading || !this.hasMore) return;this.loading = true;try {const res = await this.fetchData({current: this.currentPage,size: this.pageSize,condition: {nameRegex: this.searchKeyword,},});const newOptions = res.records && res.records.length > 0 ? res.records.map((item) => ({value: item.id,label: item.productName || item.areaName || item.salesmanName || item.agencyName || item.companyName || '',})) : [];this.options = [...this.options, ...newOptions];this.hasMore = newOptions.length === this.pageSize;this.currentPage++;} catch (error) {console.error("加载数据失败：", error);} finally {this.loading = false;}},},mounted() {// 监听滚动事件const selectDropdown = document.querySelector(".el-select-dropdown");if (selectDropdown) {this.handleScroll = () => {const { scrollTop, scrollHeight, clientHeight } = selectDropdown;// 当滚动到底部时加载更多数据if (scrollHeight - scrollTop - clientHeight < 50) {this.loadData();}};selectDropdown.addEventListener("scroll", this.handleScroll);}},beforeDestroy() {// 移除滚动事件监听const selectDropdown = document.querySelector(".el-select-dropdown");if (selectDropdown && this.handleScroll) {selectDropdown.removeEventListener("scroll", this.handleScroll);}},
};
</script><style lang="scss" scoped>
.loading-more {color: #909399;font-size: 12px;
}
</style>

2、使用懒加载下拉组件

// 引入懒加载下拉组件
import LazyLoadSelect from "@/components/lazyLoadSelect/index.vue";// 使用示例
<LazyLoadSelectv-model="searchForm.province":fetch-data="getArea()"placeholder="请选择":style="{ width: '200px' }"@change="handleProvinceChange"/>methods: {// 获取省份回调函数getArea() {return this.getAreaPage()},// 分页查询省份API接口调用getAreaPage async(params) {const res = await axios.post('/api/area/page', params)return res.data}
}              

写在最后

懒加载组件可以直接Copy进行使用，然后根据具体接口情况修改loadData方法中fetchData的请求参数和返回结果即可。