antd框架的初体验——table表格添加序号和分页总数的功能
从今年开始,我要开始使用antd
框架开发后台管理系统了,哇咔咔,要学习新东西了,超级开心。。。
今天遇到的一个需求就是a-table
组件,需要添加一个序号一列,分页部分需要添加一个分页总数。
效果图如下:
1.a-table
组件的使用
<a-table
:rowKey="(r, i) => i"
:columns="columns"
:scroll="{ y: screenHeight, x: 1400 }"
:dataSource="messageList"
bordered
:pagination="pagination"
@change="handleTableChange"
:loading="loading"
>
<div slot="action" slot-scope="record">
<a
href="javascript:;"
@click="$refs.createModal.openModal(record, true)"
>详情</a
>
</div>
</a-table>
看下组件中的属性:
1. rowkey :表格中每一行的唯一值,是一个动态绑定的数据,可以取每行中的id,也可以直接使用每行的索引值i
2. columns :表格中的列,具体要展示的列
3. scroll :表格的横纵向是否出现滚动条,如果超过指定的宽度或高度,就需要出现滚动条
4. dataSource :表格的数据,是一个数组
5. bordered :表格边框,bordered表示表格要有边框
6. pagination :分页数据
7. change :改变表格数据时触发,比如切换页码与页容量时。
8. loading :表格数据加载时的加载状态loading展示
2.a-table
组件添加索引
const columns = [
{
title: "序号",
width: 70,
customRender: (text, record, index) => `${index + 1}`,
},
]
3.a-table
添加表格总数
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0,
showTotal: (total) => `共 ${total} 条数据`, // 展示总共有几条数据
},
获取表格数据后,设置total
总数。
this.$message.success("数据获取成功");
this.messageList = (res.data && res.data.items) || [];
const pagination = { ...this.pagination };
pagination.total =
(res.data && res.data.items && res.data.total) || 0;
this.pagination = pagination;
改变表格数据后,也就是handleTableChange
函数:
handleTableChange(pagination, filters, sorter) {
const pager = { ...this.pagination };
pager.pageIndex = pagination.current;
this.pagination = pager;
this.getList();//获取表格数据的接口
},
最完整的pagination
分页配置
const pagination = {
showSizeChanger:true,
showQuickJumper:true,
total:pagination.totalData,//数据总数
pageSize:10,
current:1,
showTotal:((total)=>{
return `共${total}条`
})
}
基础积累,多多益善。
完成!!!