element UI 表格做下滑滚动效果,请求接口数据,内容记录
import { ElMessage } from "element-plus"; // vue3.0 引入方式
// 定义横向滚动条的初始值
let arr = [0];
// 表格无限滚动加载
const InfiniteScroll = function(fn, obj , cls, index) {
let table_body = document.getElementsByClassName(cls)[index];
table_body.addEventListener("scroll", () => {
arr.push(table_body.scrollLeft);
if(arr[arr.length-1] != arr[arr.length-2]) {
arr = [arr[arr.length-1]];
return;
} else {
arr = [arr[arr.length-1]];
};
const scrollDistance = table_body.scrollHeight - table_body.scrollTop - table_body.clientHeight;
if(scrollDistance <= 0) {
if(!obj.loading) {
obj.loading = true;
obj.pageNum++;
if(obj.total <= obj.tableData.length){
obj.loading = false;
ElMessage.warning('暂无更多数据');
return;
};
fn();
};
};
});
};
let search = {
pageNum: 1, // 必传
pageSize: 9, // 必传
total: 0, // 必传
loading: false, // 必传
tableData: [], // 必传
},
// 调用
InfiniteScroll(
() => {
// 接口请求
},
search, // 参数
"el-table__body-wrapper", // element UI 表格dom的类型
0, // 类名下标
);