feat: 新增嵌套子表格功能和demo,文档。修复rowRef参数bug
This commit is contained in:
parent
865e4fd2b9
commit
87a81b2a42
|
@ -83,6 +83,8 @@
|
||||||
background: #f7f7f7; }
|
background: #f7f7f7; }
|
||||||
.u-table tr.u-table-expanded-row:hover {
|
.u-table tr.u-table-expanded-row:hover {
|
||||||
background: #f7f7f7; }
|
background: #f7f7f7; }
|
||||||
|
.u-table tr.u-table-expanded-row .u-table {
|
||||||
|
padding: 0 40px 0 20px; }
|
||||||
.u-table-column-hidden {
|
.u-table-column-hidden {
|
||||||
display: none; }
|
display: none; }
|
||||||
.u-table-prev-columns-page, .u-table-next-columns-page {
|
.u-table-prev-columns-page, .u-table-next-columns-page {
|
||||||
|
|
|
@ -449,7 +449,7 @@ var Table = function (_Component) {
|
||||||
}, onHoverProps, {
|
}, onHoverProps, {
|
||||||
key: key,
|
key: key,
|
||||||
hoverKey: key,
|
hoverKey: key,
|
||||||
ref: rowRef(record, i, indent),
|
ref: rowRef,
|
||||||
store: this.store
|
store: this.store
|
||||||
})));
|
})));
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,64 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 嵌套子表格
|
||||||
|
* @description 通过expandedRowRender参数来实现子表格
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const columns15 = [
|
||||||
|
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||||
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||||
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "d",
|
||||||
|
key: "d",
|
||||||
|
render(text, record, index) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
onClick={() => {
|
||||||
|
alert("这是第" + index + "列,内容为:" + text);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
一些操作
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data15 = [
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||||
|
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||||
|
];
|
||||||
|
|
||||||
|
class Demo15 extends Component {
|
||||||
|
expandedRowRender = () => {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns15}
|
||||||
|
data={data15}
|
||||||
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns15}
|
||||||
|
data={data15}
|
||||||
|
expandedRowRender={this.expandedRowRender}
|
||||||
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo15;
|
File diff suppressed because one or more lines are too long
56
docs/api.md
56
docs/api.md
|
@ -9,33 +9,35 @@
|
||||||
|
|
||||||
### Table
|
### Table
|
||||||
|
|
||||||
|参数|说明|类型|默认值|
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|:--|:---|:--|:---|
|
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||||
|data|传入的表格数据|array|[]|
|
| data | 传入的表格数据 | array | [] |
|
||||||
|columns|列的配置表,具体配置见下表|array|-|
|
| columns | 列的配置表,具体配置见下表 | array | - |
|
||||||
|defaultExpandAllRows|默认是否展开所有行|bool|false|
|
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||||
|expandedRowKeys|展开的行,控制属性|array|-|
|
| expandedRowKeys | 展开的行,控制属性 | array | - |
|
||||||
|defaultExpandedRowKeys|初始扩展行键|array|[]|
|
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||||
|useFixedHeader|是否使用固定表头|bool|false|
|
| useFixedHeader | 是否使用固定表头 | bool | false |
|
||||||
|bodyStyle|添加到tablebody上的style|object|{}|
|
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||||
|style|添加到table上的style|object|{}|
|
| style | 添加到table上的style | object | {} |
|
||||||
|rowKey|如果rowKey是字符串,`record [rowKey]`将被用作键。如果rowKey是function,`rowKey(record)'的返回值将被用作键。| string or Function(record):string|'key'|
|
| rowKey | 如果rowKey是字符串,`record [rowKey]`将被用作键。如果rowKey是function,`rowKey(record)'的返回值将被用作键。 | string or Function(record):string | 'key' |
|
||||||
|rowClassName|获取行的classname|Function(record, index, indent):string|() => ''|
|
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||||
|expandedRowClassName|获取展开行的className|Function(recode, index, indent):string|() => ''|
|
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||||
|onExpand|展开行时的钩子函数|Function(expanded, record)|() => ''|
|
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||||
|onExpandedRowsChange|函数在扩展行更改时调用|Function(expandedRows)|() => ''|
|
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||||
|indentSize|indentSize为每个级别的data.i.children,更好地使用column.width指定|number|15|
|
| indentSize | indentSize为每个级别的data.i.children,更好地使用column.width指定 | number | 15 |
|
||||||
|onRowClick|行的点击事件钩子函数|Function(record, index)|() => ''|
|
| onRowClick | 行的点击事件钩子函数 | Function(record, index) | () => '' |
|
||||||
|onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''|
|
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index) | () => '' |
|
||||||
|expandIconAsCell|是否将expandIcon作为单元格|bool|false|
|
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||||
|expandIconColumnIndex|expandIcon的索引,当expandIconAsCell为false时,将插入哪个列|number|0|
|
| expandIconColumnIndex | expandIcon的索引,当expandIconAsCell为false时,将插入哪个列 | number | 0 |
|
||||||
|showHeader|是否显示表头|bool|true|
|
| showHeader | 是否显示表头 | bool | true |
|
||||||
|title|表格标题|function|-|
|
| title | 表格标题 | Function | - |
|
||||||
|footer|表格尾部|function|-|
|
| footer | 表格尾部 | Function | - |
|
||||||
|emptyText|无数据时显示的内容|function|() => 'No Data'|
|
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||||
|scroll|横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{ x: true, y: 300 }|object|{}|
|
| scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{ x: true, y: 300 } | object | {} |
|
||||||
|rowRef|获取行的ref|Function(record, index, indent):string|() => null|
|
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||||
|getBodyWrapper|添加对table body的包装|Function(body)|body => body|
|
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||||
|
| expandedRowRender | 额外的展开行 | Function | - |
|
||||||
|
|
||||||
|
|
||||||
### Column
|
### Column
|
||||||
|
|
||||||
|
|
|
@ -381,7 +381,7 @@ class Table extends Component{
|
||||||
{...onHoverProps}
|
{...onHoverProps}
|
||||||
key={key}
|
key={key}
|
||||||
hoverKey={key}
|
hoverKey={key}
|
||||||
ref={rowRef(record, i, indent)}
|
ref={rowRef}
|
||||||
store={this.store}
|
store={this.store}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -144,6 +144,9 @@ $table-move-in-color: $bg-color-base;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f7f7f7;
|
background: #f7f7f7;
|
||||||
}
|
}
|
||||||
|
.u-table{
|
||||||
|
padding: 0 40px 0 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-column-hidden {
|
&-column-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Loading…
Reference in New Issue