ant design vue2 表格 滚动底部加载数据

Ant Design Vue2 的表格组件支持滚动加载数据，可以通过使用 `scroll` 事件和 `load-more` 方法来实现。

首先，在表格组件中添加 `scroll` 事件监听：

<template>
  <a-table :columns="columns" :data-source="dataSource" @scroll="handleScroll">
    <!-- 表格内容 -->
  </a-table>
</template>

然后在组件中定义 `dataSource` 数据源和 `handleScroll` 方法，其中 `handleScroll` 方法通过判断滚动到底部来触发加载更多数据：

<script>
export default {
  data() {
    return {
      dataSource: [],
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      totalCount: 0 // 总条数
    }
  },
  methods: {
    handleScroll(e) {
      const tableBody = e.target.querySelector('.ant-table-body')
      const scrollHeight = tableBody.scrollHeight
      const scrollTop = tableBody.scrollTop
      const clientHeight = tableBody.clientHeight

      if (scrollHeight - scrollTop - clientHeight <= 0) {
        // 滚动到底部，加载更多数据
        this.loadMore()
      }
    },
    loadMore() {
      // 发送请求获取数据
      // ...
      // 获取到数据后更新 dataSource
      this.dataSource = this.dataSource.concat(newData)
    }
  }
}
</script>

当用户滚动到表格底部时，就会触发 `handleScroll` 方法，该方法会判断是否已经滚动到底部，如果是，则会调用 `loadMore` 方法来加载更多数据。在 `loadMore` 方法中，可以通过发送请求获取数据，并将新数据合并到 `dataSource` 中，从而实现滚动底部加载数据的效果。