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

原创

已于 2023-06-01 09:42:17 修改 · 3.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-05-31 18:09:55 首次发布

文章描述了一种在Vue3项目中处理el-select组件触底加载功能的方法。由于无法直接通过自定义指令获取el-select-dropdown.el-select-dropdown__wrap元素，作者通过添加自定义属性data-class与popper-class配合，实现了在下拉框滚动到底部时加载更多数据的功能。同时，文章提供了一个封装好的指令示例。

思路

做一个全局指令
查询了大量文章发现统一用的指令来实现触底加载功能实操中发现在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