el-table鼠标滚动到底部加载第二页数据

您可以在el-table中监听一个scroll事件，当滚动到底部时触发一个方法，该方法可以通过ajax请求获取第二页的数据，并将其添加到现有的数据列表中。具体实现代码如下：

<template>
  <el-table :data="tableData" @scroll.native="handleScroll">
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 存储表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      total: 0 // 总数据条数
    }
  },
  mounted() {
    // 页面加载时默认加载第一页数据
    this.getTableData()
  },
  methods: {
    getTableData() {
      // 发送ajax请求获取表格数据
      const url = `/api/getTableData?page=${this.currentPage}&pageSize=${this.pageSize}`
      axios.get(url).then(res => {
        this.tableData = this.tableData.concat(res.data.list)
        this.total = res.data.total
      })
    },
    handleScroll(event) {
      const tableBody = event.target.querySelector('.el-table__body-wrapper')
      const scrollDistance = tableBody.scrollHeight - tableBody.scrollTop - tableBody.clientHeight
      if (scrollDistance <= 0) {
        // 滚动到底部，加载第二页数据
        if (this.tableData.length < this.total) {
          this.currentPage++
          this.getTableData()
        }
      }
    }
  }
}
</script>

在上面的代码中，我们监听了el-table的scroll事件，并在handleScroll方法中计算了表格内容区域的滚动距离。当滚动距离为0时，说明已经滚动到了底部，此时我们判断当前是否还有更多数据需要加载，如果还有，则增加当前页码，发送ajax请求获取第二页数据，并将其添加到现有的表格数据中。