Antd 3.0 table,表格组件(Table属性,Column属性,RowSelection属性)
一、Table属性
常用参数说明:
参数 | 说明 | 类型 | 默认 |
---|---|---|---|
dataSource | 数据数组 | any[] | |
columns | 表格列的配置描述,具体项见下表 | ColumnProps[] | |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string|Function(record):string | ‘key’ |
pagination | 分页器,参考配置项或 pagination 文档,设为 false 时不展示和进行分页 | object | True |
rowClassName | 表格行的类名 | Function(record, index):string | |
rowSelection | 表格行是否可选择,配置项 | object | null |
1.datasouce:传入数组,类型可以是字符串,数字,对象,也可以通过判断(xxx?A:B)来设置DataSource。
2.Columns:传入数组对象,具体对象值(column属性)
3.RowKey:设置key从而不会出现报错,diff算法
4.Pagination:默认会存在分页,设置false可以将分页隐藏
5.RowClassName:可以设置某一行的列名,从而设置某一行的列的样式,index为行数的索引
6.RowSelection:设置表格是否可以选择,具体对象属性值(rowSelection属性)
二、Column属性
参数 | 说明 | 类型 | 默认 |
---|---|---|---|
title | 列头显示文字 | ReactNode | |
dataIndex | 列数据在数据项(DataSource中)对应的名字,相同则获取到数据 | string | |
key | React 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性 | string | |
ellipsis | 超过宽度将自动省略,暂不支持和排序筛选一起使用。 | boolean | false |
render | 渲染函数,当前该行该格子的值(text),当前整行数据(record),行索引(index) | Function(text,record,index) |
1.Render:渲染函数
2.Title:表头名
3.DataIndex:表格对应数据在DataSource里对应的名字
4.Key:标识
5.Ellipsis:自动省略
三、RowSelection属性
参数 | 说明 | 类型 | 默认 |
---|---|---|---|
selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[]|number[] | [] |
onChange | 选中项发生变化时的回调 | Function(selectedRowKeys, selectedRows) |
1.selectedRowKeys:对应选中的行的key值(哪几行被选中了)。
2.onChange:当改变的时候,将选中的值保存并赋值给selectedRowKeys属性,也可以做其他逻辑操作。
ange:当改变的时候,将选中的值保存并赋值给selectedRowKeys属性,也可以做其他逻辑操作。