element ui table 触底下拉加载数据

<template>
  <el-table height="300" :data="tableData"
            style="width: 100%;">
    <el-table-column prop="date" label="Date" width="180"/>
    <el-table-column prop="name" label="Name" width="180"/>
    <el-table-column prop="address" label="Address"/>
  </el-table>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from "vue";
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
function load() {
  //发送请求从后端拿到数据拼接上去
  //从后端还可以拿到总数，当所有数据加载完以后就可以停止发送请求了
  tableData.value = tableData.value.concat({
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    })
}
let dom
function listenTableHeight() {
  let fun = ()=>{
    const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
    if(scrollDistance <=15){//证明已经到底，可以请求接口
      load()
    }
  }
  onMounted(() => {
    dom = document.querySelector(".el-scrollbar__wrap")
    dom.addEventListener("scroll",fun)
  });
  onUnmounted(() => {
    dom.removeEventListener("scroll", fun)
  })
}
listenTableHeight()
</script>

　　

el-scrollbar__wrap是el-table里面，实际滚动区域的盒子
调用loda的时候最好加个防抖