2016-12-26 16:52:39 +08:00
|
|
|
|
# Table
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|
|
|
|
|
|
表格是以结构化的方式来展示大量的信息最佳方法，使信息更易于阅读与理解。
|
|
|
|
|
|
表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据，小量的信息，静态数据以及不断地变动的数据。
|
|
|
|
|
|
|
2016-12-26 16:52:39 +08:00
|
|
|
|
## 代码演示
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|
2017-11-06 15:38:01 +08:00
|
|
|
|
## 引入机制
|
|
|
|
|
|
|
|
|
|
|
|
import Table from "bee-table";
|
|
|
|
|
|
import 'bee-table/build/Table.css';
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-12-26 16:52:39 +08:00
|
|
|
|
## API
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|
|
|
|
|
|
### Table
|
|
|
|
|
|
|
2017-10-26 16:39:21 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
|
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
|
|
|
|
|
| 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 |
|
2017-10-26 16:58:23 +08:00
|
|
|
|
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
|
|
|
|
|
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
2017-10-26 16:39:21 +08:00
|
|
|
|
| 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 |
|
|
|
|
|
|
| expandedRowRender | 额外的展开行 | Function | - |
|
2017-11-02 14:01:03 +08:00
|
|
|
|
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
2017-10-30 16:05:20 +08:00
|
|
|
|
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
2017-12-15 13:47:43 +08:00
|
|
|
|
*注意: 一旦使用了expandedRowRender参数，data参数中的key属性必须设置。否则会导致无法展开！*
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|
|
|
|
|
|
### Column
|
|
|
|
|
|
|
|
|
|
|
|
|参数|说明|类型|默认值|
|
|
|
|
|
|
|:--|:---|:--|:---|
|
|
|
|
|
|
|key|列的键|string|-|
|
|
|
|
|
|
|className|传入列的classname|String |-|
|
2017-11-22 10:07:10 +08:00
|
|
|
|
|colSpan|该列的colSpan，设置列合并|Number|-|
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|title|列的标题|node|-|
|
|
|
|
|
|
|dataIndex| 显示数据记录的字段|String|-|
|
|
|
|
|
|
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
|
|
|
|
|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
2017-11-22 10:07:10 +08:00
|
|
|
|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|
2017-01-15 12:10:32 +08:00
|
|
|
|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
2017-09-21 14:34:05 +08:00
|
|
|
|
|
|
|
|
|
|
|
2017-09-22 14:47:53 +08:00
|
|
|
|
{% include "mixin.md"%}
|
|
|
|
|
|
|
|
|
|
|
|
|
2017-10-23 15:42:01 +08:00
|
|
|
|
{% include "rendertype.md"%}
|
