# Table 表格是以结构化的方式来展示大量的信息最佳方法,使信息更易于阅读与理解。 表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据,小量的信息,静态数据以及不断地变动的数据。 ## 代码演示 ## API ### Table |参数|说明|类型|默认值| |:--|:---|:--|:---| |data|传入的表格数据|array|[]| |columns|列的配置表,具体配置见下表|array|-| |defaultExpandAllRows|默认是否展开所有行|bool|false| |expandedRowKeys|展开的行,控制属性|array|-| |defaultExpandedRowKeys|初始扩展行键|array|[]| |useFixedHeader|是否使用固定表头|bool|false| |bodyStyle|添加到tablebody上的style|object|{}| |style|添加到table上的style|object|{}| |rowKey|如果rowKey是字符串,`record [rowKey]`将被用作键。如果rowKey是function,`rowKey(record)'的返回值将被用作键。| string or Function(record):string|'key'| |rowClassName|获取行的classname|Function(record, index, indent):string|() => ''| |expandedRowClassName|获取展开行的className|Function(recode, index, indent):string|() => ''| |onExpand|展开行时的钩子函数|Function(expanded, record)|() => ''| |onExpandedRowsChange|函数在扩展行更改时调用|Function(expandedRows)|() => ''| |indentSize|indentSize为每个级别的data.i.children,更好地使用column.width指定|number|15| |onRowClick|行的点击事件钩子函数|Function(record, index)|() => ''| |onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''| |expandIconAsCell|是否将expandIcon作为单元格|bool|false| |expandIconColumnIndex|expandIcon的索引,当expandIconAsCell为false时,将插入哪个列|number|0| |showHeader|是否显示表头|bool|true| |title|表格标题|function|-| |footer|表格尾部|function|-| |emptyText|无数据时显示的内容|function|() => 'No Data'| |scroll|横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{{ x: true, y: 300 }}|object|{}| |rowRef|获取行的ref|Function(record, index, indent):string|() => null| |getBodyWrapper|添加对table body的包装|Function(body)|body => body| ### Column |参数|说明|类型|默认值| |:--|:---|:--|:---| |key|列的键|string|-| |className|传入列的classname|String |-| |colSpan|该列的colSpan|Number|-| |title|列的标题|node|-| |dataIndex| 显示数据记录的字段|String|-| |width|宽度的特定比例根据列的宽度计算|String/Number|-| |fixed| 当表水平滚动时,此列将被固定:true或'left'或'right'| true/'left'/'right'|-| |render|cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|