vue3.0自定义指令实现表格无限滚动

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("滚动到底了...")
}

标签：__,el,tableInfiniteScrollFn,自定义,表格,binding,tbody,vue3.0,let
来源： https://blog.csdn.net/qq_16495187/article/details/121753853