在列表上通过:pagination=“pagination”来配置会发现,在接口请求成功之后给total赋值,total始终显示为你切换的pageSize值,每页显示10条,total就显示为10,每页显示50条,total就显示为50,即使数据本身长度大于50
解决方案:
使用自定义的分页
1.将列表本身分页隐藏
<a-table :loading="loading" :columns="columns" :data-source="dataSource" :pagination="false">
2.根据自己的项目风格寻找合适的分页(这里用的是快速跳转的)
<a-card>
<a-row type="flex" justify="space-between">
<a-col> </a-col>
<a-col>
<a-pagination
v-model:current="searchFormState.pageNo"
show-quick-jumper
show-size-changer
:total="tableTotal"
@change="onChange"
:show-total="(tableTotal) => `总条数 ${tableTotal}`"
/>
</a-col>
</a-row>
</a-card>
const searchFormState = reactive({
serialNumber: '',
pageNo: 1,
pageSize: 10,
billNumber: '',
payTime: '',
transactionType: null
})
const tableTotal = ref(0)
const onChange = async (current, size) => {
console.log(current, size)
searchFormState.pageNo = current
searchFormState.pageSize = size
await getBalancePage()
}