Vue：如何制作表格数据分页查询

概要

我们在利用vue写后台管理项目的时候，表格会用到分页查询的功能，这次刚好我利用ant design vue需要写一个项目，那我们一起来看一下如何完成

1. 在ant design vue的表格组件中，右下角表格尾部是自带一个分页器的，所以再a-table 中添加 :pagination=“false” 即可关闭
2. 添加分页器 a-pagination 组件

		<a-pagination
            v-model="page.currentPage"
            :page-size-options="['5', '10', '20', '50']"
            :total="page.totalCount"
            show-size-changer
            :page-size="page.pageSize"
            @showSizeChange="onSizeChange"
            @change="onPageChange"
          >
         </a-pagination>

3. 在data中添加绑定的属性

 page: {
        currentPage: 1, // 当前页
        pageSize: 5, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据