1.给表格添加id,height="100%"是固定表头
<el-table
id="attr-table-box"
height="100%"
:row-style="{ height: '66px' }"
style="width: 100%; height: 100%; "
>
2.使用计算属性获取总页数
computed: {
// 表格总页数,控制滚动查询 attrTotal是数据总数;
attrTotalPage() {
return Math.ceil(this.attrTotal / this.queryParamsAttr.pageSize);
},
},
3.主要方法
// 属性表格绑定滚动事件,滚动分页查询
queryByScroll() {
const _this = this;
const tableScrollDom =
document.getElementById("attr-table-box").childNodes[2];
tableScrollDom.addEventListener("scroll", function () {
const scrollTop = tableScrollDom.scrollTop;
const clientHeight = tableScrollDom.clientHeight;
const scrollHeight = tableScrollDom.scrollHeight;
if (scrollTop + clientHeight == scrollHeight) {
// 滚动到底部
if (_this.attrTotalPage > _this.queryParamsAttr.pageNum) {
// 如果当前还没到最后一页,滚动到底部以后继续查询
_this.queryParamsAttr.pageNum++;
// 请求数据
_this.getAttrData();
}
} else {
}
});
},
4.在mounted里调用
mounted() {
this.queryByScroll();
},