antd框架表格分页写法

第一种：antd文档表格自带的分页

a-table官方地址：www.antdv.com/components/…

组件使用：

<a-table
            bordered
            row-key="id"
            size="small"
            @change="onChangePage"
            :loading="loadingData"
            :columns="tableColumns"
            :data-source="tableData"
            :pagination="pagination">
            <template #bodyCell="{ text, record, column }">
                <template v-if="column.dataIndex === 'action'">
                    <a-space>
                        <a-button size="small" @click="onModifyRecord(record)">修改</a-button>
                        <a-button
                            danger
                            size="small"
                            @click="onRemoveRecord(record.id)">删除</a-button>
                    </a-space>
                </template>
            </template>
 </a-table>

定义：

const pagination = ref({
    page: 1,
    pageSize: 20,
    total: 0,
    size: "default",
});
const loadingData = ref(false);
const tableData = ref([]);

方法：

const onChangePage = (data) => {
    pagination.value.page = data.page;
    search();
};

相关属性：

bordered：是否展示外边框和列边框
columns：表格列的配置描述
dataSource：数据数组
loading：页面是否加载中
rowKey：表格行 key 的取值，可以是字符串或一个函数
pagination  分页器，设为 false 时不展示和进行分页
change： 分页、排序、筛选变化时触发

第二种：antd文档中的分页组件

Pagination官方地址：www.antdv.com/components/…

组件使用：

       //表格
       <a-table
            bordered
            row-key="id"
            size="small"
            @change="onChangePage"
            :loading="loadingData"
            :columns="tableColumns"
            :data-source="tableData"
            :pagination="false">
            <template #bodyCell="{ text, record, column }">               
                <template v-if="column.dataIndex === 'action'">
                    <a-space>
                        <a-button size="small" @click="checkData(record)">查看</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>
        //分页组件
        <div class="pagination-wrapper">
            <a-pagination show-size-changer 
            size="small" 
            v-model:current="pagination.page"
            v-model:page-size="pagination.pageSize"
            :show-total="(total) => `共 ${total} 条`" 
            :total="pagination.total" 
            :pageSizeOptions="['10', '20', '50', '100']"
            @change="search"
            @showSizeChange="onChangePageSize">
            </a-pagination>
        </div>

方法：

 onChangePage(data) {
            this.pagination.page = data.current;
            this.search();
    },
        
    onChangePageSize(){
        this.pagination.page = 1;
        this.search();
     },

相关属性：

current(v-model)：当前页数
size：分页尺寸
pageSize(v-model)：每页条数
pageSizeOptions：指定每页可以显示多少条
showTotal：用于显示数据总量和当前数据顺序
total:数据总数
showSizeChange：pageSize 变化的回调

两者区别：

表格自带的分页很明显就是antd文档中的分页组件最基础的分页。

当页数小于五页数据较少时，可直接使用表格自带的分页。

当页数大于五页数据较多时，建议使用专门的分页组件增强用户体验。