素材巴巴 > 程序开发 >

Antd 3.0 table,表格组件(Table属性,Column属性,RowSelection属性)

程序开发 2023-09-03 13:22:47

Antd 3.0 table,表格组件(Table属性,Column属性,RowSelection属性)

一、Table属性

​ 常用参数说明:

参数说明类型默认dataSource数据数组any[]columns表格列的配置描述,具体项见下表ColumnProps[]rowKey表格行 key 的取值,可以是字符串或一个函数string|Function(record):string‘key’pagination分页器,参考配置项或 pagination 文档,设为 false 时不展示和进行分页objectTruerowClassName表格行的类名Function(record, index):stringrowSelection表格行是否可选择,配置项objectnull

​ 1.datasouce:传入数组,类型可以是字符串,数字,对象,也可以通过判断(xxx?A:B)来设置DataSource。
​ 2.Columns:传入数组对象,具体对象值(column属性)
​ 3.RowKey:设置key从而不会出现报错,diff算法
​ 4.Pagination:默认会存在分页,设置false可以将分页隐藏
​ 5.RowClassName:可以设置某一行的列名,从而设置某一行的列的样式,index为行数的索引
在这里插入图片描述
​ 6.RowSelection:设置表格是否可以选择,具体对象属性值(rowSelection属性)

二、Column属性

参数说明类型默认title列头显示文字ReactNodedataIndex列数据在数据项(DataSource中)对应的名字,相同则获取到数据stringkeyReact 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性stringellipsis超过宽度将自动省略,暂不支持和排序筛选一起使用。booleanfalserender渲染函数,当前该行该格子的值(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属性,也可以做其他逻辑操作。在这里插入图片描述


标签:

上一篇: Ant打包Apk(上) 下一篇: 动感图聊
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。