el-select滚动分页加载模糊搜索防抖
目录
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)
}
})
},