Ant Design of Vue表格（带分页/多选）

Ant Design of Vue 是一套基于 Vue.js 的 UI 组件库，其中包含了丰富的组件，包括表格组件。下面是一个带分页和多选功能的 Ant Design of Vue 表格示例：

<template>
  <a-table :columns="columns"
           :data-source="dataSource"
           :pagination="pagination"
           row-selection="rowSelection"
           @change="handleTableChange">
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '地址',
          dataIndex: 'address'
        }
      ],
      dataSource: [], // 表格数据
      pagination: { // 分页配置
        current: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0 // 数据总条数
      },
      rowSelection: { // 多选配置
        selectedRowKeys: [],
        onChange: this.handleRowSelectionChange
      }
    }
  },
  methods: {
    // 处理表格变化事件
    handleTableChange(pagination) {
      this.pagination = pagination
      this.fetchData()
    },
    // 处理多选变化事件
    handleRowSelectionChange(selectedRowKeys) {
      this.rowSelection.selectedRowKeys = selectedRowKeys
    },
    // 获取表格数据
    fetchData() {
      // 发送异步请求获取数据
      // ...
      // 设置表格数据和分页信息
      this.dataSource = []
      this.pagination.total = 100
    }
  },
  mounted() {
    // 初始化数据
    this.fetchData()
  }
}
</script>

在上面的代码中，`columns` 数组定义了表格的列信息，`dataSource` 数组存储了表格的数据，`pagination` 对象定义了分页信息，`rowSelection` 对象定义了多选配置。在 `a-table` 组件中，我们将这些配置传递给了组件，并设置了相应的事件回调函数。在 `handleTableChange` 方法中，我们处理了分页变化事件，在 `handleRowSelectionChange` 方法中，我们处理了多选变化事件。`fetchData` 方法用于获取表格数据，我们可以在其中发送异步请求获取数据，并设置表格数据和分页信息。