element UI 表格做下滑滚动效果，请求接口数据

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, // 类名下标
);