1.代码
let Vue = createApp(App)
Vue.directive('tableInfiniteScroll', {
mounted(el, binding) {
let tbody = el.querySelector(".el-table__body-wrapper");
el.tableInfiniteScrollFn = function () {
if (this.scrollHeight - this.scrollTop - parseInt(this.style.height) == 0) {
binding.value();
}
};
tbody.addEventListener("scroll", el.tableInfiniteScrollFn);
tbody = undefined;
},
unmounted(el, binding) {
let tbody = el.querySelector(".el-table__body-wrapper");
tbody.removeEventListener("scorll", el.tableInfiniteScrollFn);
el.tableInfiniteScrollFn = undefined;
}
})
2.使用
<div class="SimulationTasks-panel-tablenumber" >
<el-table
:data="State.StudentallInformation"
style="width: 98%" height="98%"
v-table-infinite-scroll="Load"
:default-sort="{prop: 'date', order: 'ascending'}"
>
<el-table-column prop="title" label="任务名称" min-width="22.3%" sortable>
<template #default="scope">
<el-form :model="scope.row">
<el-form-item>
<span >{{ scope.row.title }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
3.代码
function Load(){
console.log("滚动到底了...")
}