使用ant design vue写一个嵌套表格，子表格带自己的分页

你可以使用Ant Design Vue的Table组件和Expandable Row功能来实现嵌套表格，并结合Pagination组件来为子表格添加分页。

首先，在Table组件中设置 Expandable Row，以便在父级行下面展示子表格。在子表格中，你可以使用Pagination组件来设置分页。

下面是一个示例代码：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" :expandable="{expandedRowRender}">
  </a-table>
</template>

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

export default {
  name: 'NestedTable',
  components: {
    'a-table': Table,
    'a-pagination': Pagination
  },
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name'
        },
        {
          title: 'Age',
          dataIndex: 'age'
        },
        {
          title: 'Address',
          dataIndex: 'address'
        }
      ],
      dataSource: [
        {
          id: 1,
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          children: [
            {
              id: 11,
              name: 'Jim Green',
              age: 42,
              address: 'London No. 1 Lake Park',
              page: 1,
              pageSize: 10,
              total: 50,
              data: [
                {
                  id: 111,
                  name: 'Joe Black',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park'
                },
                {
                  id: 112,
                  name: 'Jim Red',
                  age: 32,
                  address: 'London No. 2 Lake Park'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          children: [
            {
              id: 21,
              name: 'Jim Green',
              age: 42,
              address: 'London No. 1 Lake Park',
              page: 1,
              pageSize: 10,
              total: 50,
              data: [
                {
                  id: 211,
                  name: 'Joe Black',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park'
                },
                {
                  id: 212,
                  name: 'Jim Red',
                  age: 32,
                  address: 'London No. 2 Lake Park'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    expandedRowRender(row) {
      return (
        <div>
          <a-table
            :columns="columns"
            :data-source="row.children[0].data"
            row-key="id"
            :pagination="{
              current: row.children[0].page,
              pageSize: row.children[0].pageSize,
              total: row.children[0].total,
              showTotal: total => `Total ${total} items`,
              onChange: (page, pageSize) => {
                this.handlePageChange(row, page, pageSize);
              }
            }"
          ></a-table>
        </div>
      );
    },
    handlePageChange(row, page, pageSize) {
      // 这里你可以根据page和pageSize重新获取数据并更新dataSource中的子表格数据
      // ...
      row.children[0].page = page;
      row.children[0].pageSize = pageSize;
    }
  }
};
</script>

在这个示例中，我们通过dataSource来设置表格数据，其中每个数据项中都包含一个children属性，用于存储子表格的数据。子表格数据中包含了page、pageSize、total和data属性，分别表示当前页码、每页显示的条数、总条数和当前页的数据。在expandedRowRender方法中，我们使用Pagination组件来为子表格添加分页，并通过onChange事件来监听分页变化，以便重新获取数据并更新dataSource中的子表格数据。