最近在个新项目里开发CMS端,vue技术栈和antd的UI框架
表格table使用链接:antd的table
分页pagination使用链接:antd的pagination
表格单独使用时,自带简单分页,只包含 上一页, 页面码, 下一页,例如:
但是有时候产品和甲方的需求很奇葩,非得可选的pageSize,显示总数等功能,文档里有时候也阐述不全,甚至不对,关键时候还要靠自己动动脑子,看代码:
//template部分
<a-table :pagination="pagination"
:rowSelection="rowSelection"
:columns="columns"
:dataSource="dataList"
@change="TableChange"
rowKey="id"
>
data(){
return{
pagination:{
defaultPageSize:5,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger:true,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
}
}
},
defaultPageSize 设置默认一页table里多少个条目
showTotal 用于显示数据总量和当前数据顺序
showSizeChanger:true 是否可以改变 pageSize,这个很重要一定要加上,很多网上的教程里都没写
pageSizeOptions 以arr形式设置每页可以展示多少条的选项
onShowSizeChange:()=>{} 点击切换每页可以展示多少条的下拉框,会触发这个方法,可以理解为监听“xx条/页”下拉框的方法,网上很多文章都是用showSizeChange,实践证明并不能用,文档上也没写明“onShowSizeChange”这个方式,所以在这要跟大家强调一下。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。