ElTable触底加载方案

xxxx.vue

<template>
  <el-table
    ref="tableRef"
    :data="showTableData"
    v-loading="isLoadingMore"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <!-- columns -->
  </el-table>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const tableRef = ref();
const tableData = ref([]);
const showTableData = ref([]);
const isLoadingMore = ref(false);

watch(
  () => props.data,
  () => {
    tableData.value = props.data;
    showTableData.value = [];
    tableRef.value?.setScrollTop(0);
    loadMore();
  }
);

onMounted(() => {
  const scrollBarWrap = tableRef.value?.scrollBarRef.wrapRef;
  if (scrollBarWrap) {
    // vueuse的useEventListener，配置了按需导入
    useEventListener(scrollBarWrap, 'scroll', onTableScroll);
  }
});

function onTableScroll(event) {
  const target = event.target;
  if (
    target.scrollHeight - target.scrollTop - target.clientHeight < 10 &&
    !isLoadingMore.value &&
    showTableData.value.length < tableData.value.length
  ) {
    loadMore();
  }
}
function loadMore() {
  isLoadingMore.value = true;
  const startIndex = showTableData.value.length;
  const endIndex = Math.min(startIndex + 10, tableData.value.length);
  showTableData.value.push(...tableData.value.slice(startIndex, endIndex));
  
  setTimeout(() => {
    isLoadingMore.value = false;
  }, 200);
}
</script>