vue ant design table 和 pagination 一起使用

要在Vue中使用Ant Design Table和Pagination组件，你可以按照以下步骤操作：

1. 安装Ant Design Vue和Vue Router：

npm install ant-design-vue vue-router --save

2. 在你的Vue应用程序中导入Ant Design Vue和Vue Router：

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import VueRouter from 'vue-router'

Vue.use(Antd)
Vue.use(VueRouter)

3. 创建一个包含Table和Pagination组件的Vue组件：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" :pagination="false"></a-table>
    <a-pagination :current="currentPage" :total="total" :page-size="pageSize" @change="onPageChange"></a-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      currentPage: 1,
      pageSize: 10,
      total: 3,
    }
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page
    },
  },
}
</script>

4. 在Vue Router中定义路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import TablePage from './TablePage.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/table', component: TablePage },
]

const router = new VueRouter({
  routes,
})

export default router

5. 在应用程序中使用组件：

<template>
  <div>
    <a-menu :default-selected-keys="['1']">
      <a-menu-item key="1">
        <router-link to="/table">表格</router-link>
      </a-menu-item>
    </a-menu>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

这样就可以在Vue应用程序中使用Ant Design Table和Pagination组件了。在上面的示例中，我们定义了一个包含表格和分页器的组件，然后使用Vue Router将其添加到应用程序中。在菜单中点击“表格”链接，就可以展示Table和Pagination组件了。