el-select懒加载（自定义指令selectLazyload）实现大数据量展示和搜索_下拉选择框懒加载数据

需求：在一个el-form里使用el-select提供选择用户的下拉框，但是每次打开弹框的时候由于数据量过大都需要加载很久才能将数据渲染出来，并且页面异常卡顿

封装懒加载指令

在指令文件夹下新建文件 selectLazyload.js

export default {
    bind (el, binding) {
        // 获取选择器下的滚动框DOM
        const SELECTWRAP_DOM = el.querySelector(
            `.el-select-dropdown__wrap`
        ); 
        // 如果找到了滚动框DOM，则添加滚动事件监听器
        if (SELECTWRAP_DOM) {
            SELECTWRAP_DOM.addEventListener("scroll", function () {
                // 如果滚动到底部，则调用传入的回调函数
                const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight;
                if (condition) {
                    binding.value();
                }
            });
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在main.js或directive/index.js中注册这个自定义指令

import selectLazyLoad from './module/selectLazyLoad'
Vue.directive('selectLazyLoad', selectLazyLoad)
1
2

html结构：在el-select上添加
v-selectLazyLoad="loadMore" 和 :filter-method="userFilterMethod"

<el-select v-model="transferTesterNo" filterable placeholder="请选择测试人" style="width:100%" v-selectLazyLoad="loadMore" :filter-method="userFilterMethod">
	<UOptins :isMobile="isMobile" v-for="{nickName, userName, organName, roleName} of options" :key="userName" :label="nickName" :organName="organName" :value="userName" :roleName="roleName" />
</el-select>
1
2
3

js结构

// 加载更多
loadMore(){
	// 如果截取的长度==获取到的所有option长度将不再截取
	if (this.options.length == this.userOptions?.length) return;
	this.userPageNum++;
	this.getScrollUser();
},
 
// 截取页面显示的实际option
getScrollUser(){
	// 过滤出前5条用户信息  实际展示的数据 options  全部数据 userOptions
	this.options = this.userOptions.slice(0, this.userPageNum * 5);
},
// 搜索功能
userFilterMethod(value){
	// 手动触发下拉框回滚至顶部，避免触发v-selectLazyLoad指令
	document.querySelector(`.el-select-dropdown__wrap`).scrollTop = 0;
	if (!value?.length) return this.getScrollUser();
	this.options = this.userOptions.filter((item) => item.nickName?.includes(value)) || [];
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

首次加载需要在 获取数据的接口内写上

this.userOptions = rows
this.getScrollUser()

// 在data 中定义变量 
userOptions: [],
options: [],
userPageNum: 1,
1
2
3
4
5
6
7

这样即可实现 在滚动到底部时动态加载后面的数据，且可以搜索