Vue之ant design的table表格序号连续自增
结合分页实时监听当前页和pagesize值,从而实现a-table表格随数据连续自增,代码如下:<a-table:columns="columnShareDetail":dataSource="cameraList":pagination="paginationOpt"bordered></a-table>
·
结合分页实时监听当前页和pagesize值,从而实现a-table表格随数据连续自增,代码如下:
首先定义渲染的表格,自定义列columnShareDetail
<!-- 数据展示表格 -->
<a-table
:columns="columnShareDetail"
:dataSource="cameraList"
:pagination="paginationOpt"
bordered
></a-table>
在data中定义columnShareDetail,和分页paginationOpt
// 分页
paginationOpt: {
defaultCurrent: 1, // 默认当前页数
defaultPageSize: 5, // 默认当前页显示数据的大小
total: 0, // 总数,必须先有
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ["5", "10", "15", "20"],
showTotal: (total) => `共 ${total} 条`, // 显示总数
onShowSizeChange: (current, pageSize) => {
this.paginationOpt.defaultCurrent = 1;
this.paginationOpt.defaultPageSize = pageSize;
this.searchCameraFrom(); //显示列表的接口名称
},
// 改变每页数量时更新显示
onChange: (current, size) => {
this.paginationOpt.defaultCurrent = current;
this.paginationOpt.defaultPageSize = size;
this.searchCameraFrom();
},
},
// 摄像机列
columnShareDetail: [
{
title: "序号",
customRender: (text, record, index) =>
`${(this.paginationOpt.defaultCurrent - 1) *
this.paginationOpt.defaultPageSize +
index +
1}`,
},
]
更多推荐
已为社区贡献1条内容
所有评论(0)