vue3 el-table滚动加载

以下是使用Vue3实现el-table滚动加载的代码示例：

<template>
  <el-table :data="tableData" :show-header="false" row-class-name="table-row-class" height="500" ref="table">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const tableData = ref([])
    const pageNo = ref(1)
    const pageSize = ref(10)

    const fetchData = async () => {
      // 模拟异步请求数据
      const res = await fetch(`https://api.example.com/data?pageNo=${pageNo.value}&pageSize=${pageSize.value}`)
      const data = await res.json()
      tableData.value = [...tableData.value, ...data.list]
    }

    const handleScroll = () => {
      const tableEl = document.querySelector('.el-table__body-wrapper')
      const { scrollTop, scrollHeight, clientHeight } = tableEl
      if (scrollTop + clientHeight >= scrollHeight) {
        pageNo.value++
        fetchData()
      }
    }

    onMounted(() => {
      fetchData()
      document.querySelector('.el-table__body-wrapper').addEventListener('scroll', handleScroll)
    })

    return {
      tableData
    }
  }
}