实际业务需求中,当下拉框需要显示的选项过多时,我们需要实现懒加载分页。要在Ant Design Vue中自定义Select标签并实现懒加载分页,我们这里使用添加滚动监听,当下拉框滚动到底部时加载分页数据,来实现懒加载分页。
- 首先,在a-select组件配置@popupScroll,该方法用于处理懒加载和分页逻辑,动态更新a-select-option。
<a-select
:value="selectedVal"
placeholder="请选择数据源"
allow-clear
show-search
:filter-option="false"
@popupScroll="handlePopupScroll"
@search="filterOpts"
@change="clickLdapOpt"
:not-found-content="null">
<a-select-option v-for="item in datasourceList" :key="item.id" :value="item.id">
{
{ item.datasourceName }}
</a-select-option>
</a-select>
- 定义分页参数,在分页时标识当前页数和每页条数等。
// 获取数据源搜索的查询条件
selectedVal: undefined, // select组件绑定的value值
pageNo: 1, // 当前加载的页数
pageSize: 10, // 每页加载的数据个数
datasourceCount: 0, // 服务器返回的响应信息
datasourceList: [], // 服务器返回的响应信息中的搜索匹配项数据
timer: null // 定时器,控制请求频率
- 执行滚动到底部时异步加载分页数据的方法。
getDatasourceList () {
const that = this
that.listLoading = true
queryDatasourceList({
datasourceName: that.selectedVal,
current: that.pageNo,
size: that.pageSize
}).then(response => {
that.datasourceCount = response.count
if (that.datasourceList.length <= that.datasourceCount) {
that.datasourceList = that.datasourceList.concat(response.data)
}
that.listLoading = false
})
},
// 文本框值变化时回调
filterOpts (val) {
this.selectedVal = val
if (this.selectedVal) {
clearTimeout(this.timer)
this.datasourceList = []
this.pageNo = 1
this.pageSize = 10
this.timer = setTimeout(() => {
this.getDatasourceList()
}, 500)
}
},
// 列表滚动时加载数据
handlePopupScroll (e) {
const target = e.target
// 判断滚动条滚动到底部时才加载
if ((target.scrollTop + target.offsetHeight === target.scrollHeight) && (this.pageNo * this.pageSize < this.datasourceCount)) {
this.pageNo += 1
this.getDatasourceList()
}
},
// 选中 option 调用
clickLdapOpt (val) {
this.selectedVal = val
this.listQuery.datasourceId = val
},