Antd vue 表格自定义页码(Pagination)
在antd vue中,有默认的页码,但是想自定义页码需要自己配置案例:代码:html:<a-table:rowKey="(record, index) => record.key":loading="tableData.loading":columns="columns":pagination="{...pagination, total:tableData.total,}":data
·
在antd vue中,有默认的页码,但是想自定义页码需要自己配置
案例:
代码:
html:
<a-table
:rowKey="(record, index) => record.key"
:loading="tableData.loading"
:columns="columns"
:pagination="{...pagination, total:tableData.total,}"
:data-source="tableData.list"
bordered
size="middle"
@change="handleTableChange"
:scroll="{ x: '100%', y: 'calc(100vh - 350px)' }"
>
<template v-for="col in ['remarks']" :slot="col" slot-scope="text, record">
<div :class="col" :key="col">
123
</div>
</template>
</a-table>
配置:
pagination: {
size: 'small',
showQuickJumper: true,
showSizeChanger: true,
current: 1,
pageSize: 20,
total: 0,
showTotal: total => `共${total}条`
},
tableData: {
list: [],
loading: false,
total: 0
}
方法:
handleTableChange ({ current, pageSize }) {
console.log(current, pageSize)
this.pagination.current = current
this.pagination.pageSize = pageSize
}
更多推荐
已为社区贡献8条内容
所有评论(0)