需求:当tableData大于20条数据时,只加载20条数据。滚动到表格底部再加载20条数据直至所有数据加载完成
解决:
给el-table标签添加ref:table
this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => { // 监听滚动事件
const height = res.target
const clientHeight = height.clientHeight // 表格视窗高度 即wraper
const scrollTop = height.scrollTop // 表格内容已滚动的高度
const scrollHeight = height.scrollHeight // 表格内容撑起的高度
if (clientHeight + scrollTop === scrollHeight) {
// 表格滚动已经触底 更新表格数据
// this.times += 1
// const length = 20*this.times > this.baseData.length ? this.baseData.length : 20*this.times
// this.tableData = this.baseData.slice(0,length)
}
}, true)