vue3实现 下拉框触底加载更多及搜索_vue3下拉加载更多

思路

做一个全局指令
查询了大量文章 发现统一用的指令 来实现触底加载功能 实操中发现 在vu3 的版本中
（我这个项目中）无法通过自定义指令的形参 获取el-select-dropdown .el-select-dropdown__wrap 元素，所以通过el-select中的popper-class给下拉框加入一个类名 实现下拉框的选中，为了 方便指令通用 给el-select 加入自定义属性标签data-class 同popper-class值 ,方便获取到当前标签的popper-class

2、项目中的实际用法

在el-select 下再次封装

filtereMethod:自定义筛选的方法
popper-class：为当前select 下拉框的类名
data-class： 同popper-class值 是为了解决指令el参数无法获取到.el-select-dropdown .el-select-dropdown__wrap元素
v-selectLoadMore： 自定义指令

<el-select
	v-model="ruleForm.userId"
	class="m-2"
	data-class="selectClass"
	placeholder="请选择"
	filterable
	:filter-method="filtereMethod"
	v-selectLoadMore="getUserList"
	popper-class="selectClass"
>
	<el-option v-for="item in options" :key="item.userId" :label="item.nickname" :value="item.userId" />
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12

const userParams = reactive({
	bindSupplier: "2",
	page: 0,
	pageSize: 10,
	nickname: ""
});

// 用于终止加载  后端数据返回的当前列表的总页数
let totalPage = 1;
const getUserList = async () => {
	if (userParams.page < totalPage) {
		let res: any = await getUserSupplierList(userParams as any);
		if (userParams.page === 0) {
			totalPage = res.data.totalPages;
		}
		options.value = options.value.concat(res.data.datas);
		userParams.page++;
	}
};


const filtereMethod = (val: any) => {
	userParams.page = 0;
	// 我这儿是根据名称筛选
	userParams.nickname = val;
	// 筛选时 下拉框回到顶部
	nextTick(async () => {
		// 注意： .selectClass 为当前所筛选的select 下拉框的 popper-class 属性值
		let element = (document.querySelector(".selectClass") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
		element.scrollTop = 0;
		let res: any = await getUserSupplierList(userParams as any);
		options.value = res.data.datas;
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3、指令封装

查询了很多文章   大部分都是直接通过el.querySelector(".el-select-dropdown .el-select-dropdown__wrap")来查询当前元素  但是我通过实操发现无法获取 所以这里通过`自定义属性data-class来获取当前元素`
我这儿就不再写本项目注册全局指令的方法了 参考如下
1
2
3

/**
 * v-selectLoadMore
 * select 触底加载
 */
import type { Directive, DirectiveBinding } from "vue";

//  通过给标签加 data-class 来获取当前下拉框dom
const selectLoadMore: Directive = {
	beforeMount(el: DirectiveBinding, binding: DirectiveBinding) {
		const dataClass = "." + (el as any).getAttribute("select-class");
		const dataClassElement = document.querySelector(dataClass) as any;
		const element = dataClassElement.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
		element.addEventListener("scroll", () => {
			const { scrollTop, scrollHeight, clientHeight } = element;
			const scrollDistance = scrollHeight - scrollTop - clientHeight;
			if (scrollDistance <= 0) {
				binding.value();
			}
		});
	}
};

export default selectLoadMore;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24