antdesignvue 表格滚动分页

Ant Design Vue 表格组件提供了分页功能，但默认情况下只显示一页数据。如果你想要实现滚动分页，可以通过以下步骤来实现：

1. 在表格组件中添加 `scroll` 属性来启用滚动条。

2. 将 `pagination` 属性设置为 `false`，以禁用默认的分页。

3. 使用 `@scroll` 事件监听表格滚动事件。

4. 在滚动事件处理函数中，根据滚动条位置和表格高度计算出当前页码。

5. 根据当前页码，使用 `dataSource` 属性来更新表格数据。

具体实现可参考以下代码示例：

<template>
  <a-table :columns="columns" :dataSource="dataSource" :scroll="{ y: 400 }" :pagination="false" @scroll="handleScroll">
    <template slot="name" slot-scope="text">{{ text }}</template>
  </a-table>
</template>

<script>
import { Table } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
  },
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          width: 150,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 70,
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
          width: 200,
        },
      ],
      dataSource: [],
      currentPage: 1,
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 根据当前页码加载数据
      const pageSize = 10;
      const start = (this.currentPage - 1) * pageSize;
      const end = start + pageSize;
      const data = [];
      for (let i = start; i < end; i++) {
        data.push({
          key: i,
          name: `User ${i}`,
          age: Math.floor(Math.random() * 30) + 20,
          address: `Street ${i}`,
        });
      }
      this.dataSource = data;
    },
    handleScroll(e) {
      const tableBody = e.target.querySelector('.ant-table-body');
      // 计算当前页码
      const currentPage = Math.floor(tableBody.scrollTop / tableBody.clientHeight) + 1;
      if (currentPage !== this.currentPage) {
        this.currentPage = currentPage;
        this.loadData();
      }
    },
  },
};
</script>

在以上代码中，我们设置表格高度为 400px，并禁用了默认的分页。当表格滚动时，会触发 `handleScroll` 方法来更新当前页码并加载数据。注意，为了方便起见，这里的数据是随机生成的，实际应用中需要根据实际情况来获取数据。