element ui vue el-select组件滚动加载下一页数据
本身经历,input组件使用类似,但是最后渲染数据的时候总是不成功,因为下拉框中每次数据的刷新都要被触发,我实现不了,所以放弃了,选用的select组件,望已经实现的大佬指教啊,,,1.给该组件添加一个滚动触底的事件(export default中,data上面)directives: {'el-select-loadmore': {bind(el, binding) {// 获取element-
·
本身经历,input组件使用类似,但是最后渲染数据的时候总是不成功,因为下拉框中每次数据的刷新都要被触发,我实现不了,所以放弃了,选用的select组件,望已经实现的大佬指教啊,,,
1.给该组件添加一个滚动触底的事件(export default中,data上面)
directives: {
'el-select-loadmore': {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', () => {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight
if (condition) {
binding.value()
}
})
},
},
},
**
2.select代码中使用上面的方法
3.获取后台数据即可
remoteMethod(query) {
this.query = query
this.roleChildLoading = true
this.infoPage = 1
this.roleChildOptions = []
setTimeout(() => {
this.roleChildLoading = false
if (this.ruleForm.roleValue === 'agent') {
this.getMachineTransferToAgentOptions()
} else if (this.ruleForm.roleValue === 'company') {
this.getMachineTransferToCompanyOptions()
}
}, 500)
},
更多推荐
已为社区贡献3条内容
所有评论(0)