el-select滚动分页加载、模糊搜索防抖

1.创建指令

directives: { // 下拉框滚动分页加载
   loadmore: {
        inserted(el, binding) {
            const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); // 获取下拉框元素
            dom.addEventListener('scroll', function() { // 监听元素触底
                const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                if (condition) {
                    binding.value();
                }
            });
        },
    },
},

<el-select
	v-model="studentId"
	v-loadmore="loadmore"
	:filter-method="filterMethod"
	filterable
	placeholder="请输入学员名称/手机号码"
	@focus="getStudentList(searchField)"
>
	<el-option
		v-for="item in studentOption"
		:key="item.uid"
		:label="item.name+'/'+(item.sex==1?'男':'女')+'/'+item.parentPhone"
		:value="item.uid"></el-option>
</el-select>

2.定义变量

studentOption: [], // 学员下拉选项
studentId: '', // 学员id
curCount: 0, // 当前获取的学员数量
totalCount: 0, // 总学员数量
current: 1, // 当前页数
pageSize: 10, // 每页数量
timer: null, // 定时器 用于模糊搜索防抖
searchField: '', // 模糊搜索内容

3.定义方法

// 下拉框滚动分页加载
loadmore() {
    console.log('触底，请求数据')
    this.curCount = this.studentOption.length
    if (this.curCount < this.totalCount) {
        this.current = this.current + 1
        this.getStudentList(this.searchField)
    }
},
// 选择学员下拉框搜索功能
filterMethod(value) {
	this.searchField = value
    this.current = 1
    this.studentOption = []
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
        this.getStudentList(value)
    }, 1000)
},
// 获取学员列表
getStudentList(value = '') {
    var obj = {
        searchField: value,
        currPage: this.current,
        pageSize: this.pageSize,
    }
    getStuInformListPageAPI(obj).then((res) => { // 调接口
       if (res.resultCode === 200 && res.data) {
           console.log("获取学员列表成功: ", res)
           this.totalCount = res.data.totalCount
           if (res.data.dataList && res.data.dataList.length > 0) {
               res.data.dataList.forEach(ele => {
                   var idx = this.studentOption.findIndex(item => { return item.uid == ele.uid })
                   if (idx == -1) {
                       this.studentOption.push(ele)
                   }
               })
           }
       } else {
           console.log(res.resultStr)
       }
   })
},