基于 el-table 实现滚动加载（el-table-infinite-scroll）table 组件使用el-table-infinite-scroll

<el-table ref="table"
 :data="data.tableDatas"
 :max-height="tableHeight"
 style="width: 100%;"
 :isPage="isPage"
 stripe
 tooltip-effect="light"
 border="true"
 @row-click="rowClick"
 @selection-change="selectionChange"
 :row-class-name="tableRowClassName"
 v-el-table-infinite-scroll="getList"
 :infinite-scroll-distance="200"
 :infinite-scroll-disabled="data.disabled"
></el-table>
<script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
import {computed, onMounted,defineEmits,reactive,ref,watch,defineExpose} from "vue";
const props = defineProps({
 tableData: Array
});

watch(() => props.tableData, (newVal)=>{
  data.tableDatas = []
  data.page = 0
  data.disabled = false
  load();
})
const load = () => {
  // 获取所有数据，前端设置每次加载15条数据，一共需要加载的页数
  setTimeout(() => {
    let lens = props.tableData.length / 15
    data.total = Math.ceil(lens);
  }, 600);
  getList();
}
const data = reactive({
    // 推进表汇总
	tableDatas: [],
    page: 0, // 当前页
    total: 0, // 一共需要加载多少页才能把数据获取完
    disabled: false
})
const getList = () => {
  letbox = [];
  let son = [];
  setTimeout(() => {
    let arr =  props.tableData;
    // 把获取的数据每15条放入一个数组
    arr.forEach( item => {
      if(son.length === 15) {
          son = []
      }
      if(son.length === 0) {
          box.push(son)
      }
      son.push(item)
    });
    if (data.disabled) return;

    if (data.page <= data.total) {
      // 把分组好的数据，每滚动一次放入一组
      data.tableDatas = data.tableDatas.concat(box[data.page]);
    }
    data.page++;
    if (data.page === data.total) {
      data.disabled = true;
    }
  }, 800);
}
</script>