vue2 ElementPlus el-table固定表头实现滚动懒加载分页

安装 el-table-infinite-scroll
npm install --save el-table-infinite-scroll
注册自定义指令  src/directive/index.js
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
export default function directive(app) {
    app.directive('elTableInfiniteScroll', elTableInfiniteScroll);
}
main.js 调用
import { createApp } from 'vue';
import App from '@/App.vue';
// 自定义指令
import directive from './directive/index.js';
 
// 创建app
const app = createApp(App);
// 传入app调用directive方法
directive(app);
 
app.mount('#app');
业务组件中使用
<el-table v-el-table-infinite-scroll="handleTableScroll" :data="tableData" height="600">
    <el-table-column prop="id" label="xxxx" />
</el-table>
 
<script>
 
const tableData = [{id: 1}]
 
function handleTableScroll() {
    console.log('滚动分页')
}
 
</script>
// 距离底部多少则触发加载
:infinite-scroll-distance="50"

// 首次加载是否禁用
:infinite-scroll-disabled="true"

详见官方文档

el-table-infinite-scroll官方文档：npmmirror 镜像站