Ant Design使用



Table组件和分页组件的自定义

1
2
3
4
5
6
7
<a-table :pagination="pagination"
:rowSelection="rowSelection"
:columns="table_columns"
:dataSource="dataSource"
@change="TableChange"
rowKey="id"
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const table_columns=[
{
title: '序号',
dataIndex: 'ID',
width: '5%',
align: 'center',
// 处理列数据
customRender: (text, record, index) => `${index + 1}`
},
{
title: '项目状态(在办/办结)',
dataIndex: 'proStatus',
width: '10%',
align: 'center',
customRender: (text, record, index) => (text === 0 ? '在办' : '办结'),
}
}]

data(){
return{
// 表头
table_columns,
// 表格数据
dataSource: [],
pagination:{
// 设置默认一页table里多少个条目:或者使用pageSize
defaultPageSize:5,
// 用于显示数据总量和当前数据顺序
showTotal: total => `共 ${total} 条数据`,
// 是否可以改变 pageSize
showSizeChanger:true,
// 设置每页可以展示多少条的选项
pageSizeOptions: ['5', '10', '15', '20'],
// 点击切换每页可以展示多少条的下拉框,会触发这个方法
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
}
}
}

参考链接-思否

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信