element table 滚动到底部加载剩余内容
转自 https://juejin.im/post/6844903765582020621
记录一下根据原博主的理解,写的一些适用于自己项目的修改,整理一下
data() {
return {
total: 0,
isScrollOver: true, // 下拉数据是否已经加载完成
pageData: { // 表格数据加载时,带入的参数
dmId: '',
idList: '',
isReportWorkOrNot: 0,
pageCode: 1, // 当前页
pageSize: 20 // 每页几条
}
}
主要是这里监听滚动到底了
mounted() {
// 监听页面滚动条到最底部了 进行table懒加载
_this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
const height = res.target
const clientHeight = height.clientHeight
const scrollTop = height.scrollTop
const scrollHeight = height.scrollHeight
// total总数据量
if (clientHeight + scrollTop >= scrollHeight && _this.total > _this.list.length) {
console.log('到底了')
_this.pageData.pageCode++
// 识别是否重复滚动到底
if (_this.isScrollOver) {
_this.isScrollOver = false
_this.pageData.dmId = _this.stId
getListByDmId(_this.pageData).then(res => {
if (res) {
// 在原来数据上加上
_this.list = _this.list.concat(res.data)
_this.isScrollOver = true
}
}).catch(error => {
console.log(error)
})
}
}
}, true)
},
获取table值
methods: {
getList() {
const _this = this
_this.pageData.dmId = _this.stId
getListByDmId(_this.pageData).then(res => {
if (res) {
_this.list = res.data
this.total = res.total
_this.loading = false
}
}).catch(error => {
console.log(error)
})
},
}