场景描述:下拉框的选项很多,上万个选项甚至更多;如果把全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别的不好。
在 element-ui 官网中,并没有提供 select 组件下拉滚动滚动条加载更多数据的事件,可以我们想到在数据的底部添加一个点击事件来加载更多数据,但是交互就没有那么友好了。
设置高度,当超过一个高度在加载一页数据,即实现加载更多数据。
// 针对 el-select 下拉框定义的一个分页指令:滚动到底部执行加载下一页
const selectLoadMore = Vue.directive('selectLoadMore',{
bind (el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
binding.value()
}
})
}
})
export { selectLoadMore }
在 select 组件中,添加指令。
<el-select
class="wd"
size="small"
v-model="baseForm.goodsName"
placeholder="请选择"
value-key="itemCode"
filterable
remote
v-selectLoadMore="selectLoadMore"
:loading="loading"
:remote-method="remoteMethod"
>
<el-option
v-for="item in goodsCategoryData"
:key="item.id"
:label="item.goodsName"
:value="item.goodsName"
/>
</el-select>
select 下拉加载更多
selectLoadMore () {
this.pageData.currentNo = this.pageData.currentNo + 1
if (this.pageData.currentNo > this.pageData.pageCount) {
return
}
this.getGoodsList() // 请求接口
},
远程搜索方法
remoteMethod (query) {
this.pageData.quickQuery = query
this.pageData.currentNo = 1
this.goodsCategoryData = []
this.loading = true
setTimeout(() => {
this.loading = false
// 查询数据
this.getGoodsList()
}, 200)
},
接口请求参数:
async getGoodsList () {
const param = {
current: this.pageData.currentNo,
size: this.pageData.pageSize,
itemCode: this.detailObject.itemCode,
goodsName: this.pageData.quickQuery,
}
const resp = await common.getGoodsList(param)
this.goodsCategoryData = [...this.goodsCategoryData, ...resp.data.rows]
const { currentNo, pageCount, total } = resp.data
this.pageData = {
...this.pageData,
currentNo,
pageCount,
total,
}
},
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
更新
进阶版:如何将 select 组件上拉加载更多数据封装为组件呢?