Skip to content

Commit 0c09d47

Browse files
tinyminstinymins
committed
feat: add defaultExpandAllRows,defaultExpandedRowKeys and subtableProps
1 parent cedba14 commit 0c09d47

File tree

7 files changed

+723
-2
lines changed

7 files changed

+723
-2
lines changed

‎.umirc.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,13 @@ const umiConfig: IConfig = {
9191
'/drip-table/props/total',
9292
'/drip-table/props/current-page',
9393
'/drip-table/props/loading',
94+
'/drip-table/props/subtable-props',
9495
'/drip-table/props/components',
9596
'/drip-table/props/slots',
9697
'/drip-table/props/ext',
9798
'/drip-table/props/sticky',
99+
'/drip-table/props/default-expand-all-rows',
100+
'/drip-table/props/default-expanded-row-keys',
98101
'/drip-table/props/title',
99102
'/drip-table/props/footer',
100103
'/drip-table/props/subtable-title',

‎docs/drip-table/props/default-expand-all-rows.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# defaultExpandAllRows
2+
3+
- 描述：默认展开全部子表
4+
- 类型：`boolean`
5+
- 默认值：`undefined`
6+
- 更多内容：使用 [`subtableProps`](/drip-table/props/subtable-props) 对子表进行控制
7+
8+
```jsx
9+
/**
10+
* transform: true
11+
* defaultShowCode: false
12+
* hideActions: ["CSB"]
13+
*/
14+
import React from "react";
15+
import DripTable from "drip-table";
16+
import DripTableDriverAntDesign from "drip-table-driver-antd";
17+
import "antd/dist/antd.css";
18+
import "drip-table/dist/index.css";
19+
20+
const schema = {
21+
id: 'sample-table-root',
22+
rowKey: "id",
23+
rowSelection: true,
24+
columns: [
25+
{
26+
key: "mock_1",
27+
title: "商品名称",
28+
dataIndex: "name",
29+
component: "text",
30+
options: { mode: "single", maxRow: 1 },
31+
},
32+
{
33+
key: "mock_2",
34+
title: "商品详情",
35+
align: "center",
36+
dataIndex: "description",
37+
component: "text",
38+
options: { mode: "single", ellipsis: true, maxRow: 1 },
39+
},
40+
],
41+
subtable: {
42+
id: 'sample-table-sub-level-1',
43+
dataSourceKey: 'subtable',
44+
rowKey: "id",
45+
rowSelection: true,
46+
columns: [
47+
{
48+
key: 'mock_1',
49+
title: '页面名称',
50+
align: 'center',
51+
dataIndex: 'name',
52+
component: 'text',
53+
options: {
54+
mode: 'single',
55+
maxRow: 1,
56+
},
57+
},
58+
{
59+
key: 'mock_2',
60+
title: '开始/结束时间',
61+
align: 'center',
62+
hidable: true,
63+
dataIndex: 'description',
64+
component: 'text',
65+
options: {
66+
mode: 'single',
67+
ellipsis: true,
68+
maxRow: 3,
69+
},
70+
},
71+
],
72+
showHeader: false,
73+
bordered: true,
74+
subtable: {
75+
id: 'sample-table-sub-level-2',
76+
dataSourceKey: 'subtableLevel2',
77+
rowKey: "id",
78+
rowSelection: true,
79+
columns: [
80+
{
81+
key: 'mock_1',
82+
title: '页面名称',
83+
align: 'center',
84+
dataIndex: 'name',
85+
component: 'text',
86+
options: {
87+
mode: 'single',
88+
maxRow: 1,
89+
},
90+
},
91+
{
92+
key: 'mock_7',
93+
title: '操作',
94+
align: 'center',
95+
hidable: true,
96+
dataIndex: 'operate',
97+
component: 'link',
98+
options: {
99+
mode: 'multiple',
100+
operates: [
101+
{ name: 'order', label: '订购', href: './#order', target: '_blank' },
102+
{ name: 'view', label: '查看', href: './#view' },
103+
{ name: 'edit', label: '编辑', event: 'edit' },
104+
{ name: 'remove', label: '删除', event: 'remove' },
105+
],
106+
},
107+
},
108+
],
109+
},
110+
},
111+
};
112+
113+
const dataSource = [
114+
{
115+
id: 1,
116+
name: "商品一",
117+
price: 7999,
118+
status: "onSale",
119+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
120+
subtable: [
121+
{
122+
id: '1-1',
123+
name: '苹果',
124+
description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素',
125+
status: 'onSale',
126+
price: 799,
127+
subtableLevel2: [
128+
{ id: '1-1-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
129+
],
130+
},
131+
{
132+
id: '1-2',
133+
name: '梨',
134+
description: '通常是一种落叶乔木或灌木，极少数品种为常绿，属于蔷薇目蔷薇科苹果族',
135+
status: 'onSale',
136+
price: 799,
137+
subtableLevel2: [
138+
{ id: '1-2-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
139+
],
140+
},
141+
],
142+
},
143+
{
144+
id: 2,
145+
name: "商品二",
146+
price: 7999,
147+
status: "onSale",
148+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
149+
subtable: [
150+
{
151+
id: '2-1',
152+
name: '苹果',
153+
description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素',
154+
status: 'onSale',
155+
price: 799,
156+
subtableLevel2: [
157+
{ id: '2-1-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
158+
],
159+
},
160+
{
161+
id: '2-2',
162+
name: '梨',
163+
description: '通常是一种落叶乔木或灌木，极少数品种为常绿，属于蔷薇目蔷薇科苹果族',
164+
status: 'onSale',
165+
price: 799,
166+
subtableLevel2: [
167+
{ id: '2-2-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
168+
],
169+
},
170+
],
171+
},
172+
];
173+
174+
const Demo = () => {
175+
return (
176+
<DripTable
177+
driver={DripTableDriverAntDesign}
178+
schema={schema}
179+
dataSource={dataSource}
180+
defaultExpandAllRows={true}
181+
/>
182+
);
183+
};
184+
185+
export default Demo;
186+
```

‎docs/drip-table/props/default-expanded-row-keys.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# defaultExpandedRowKeys
2+
3+
- 描述：子表默认展开项
4+
- 类型：`React.Key[]`
5+
- 默认值：`undefined`
6+
- 更多内容：使用 [`subtableProps`](/drip-table/props/subtable-props) 对子表进行控制
7+
8+
```jsx
9+
/**
10+
* transform: true
11+
* defaultShowCode: false
12+
* hideActions: ["CSB"]
13+
*/
14+
import React from "react";
15+
import DripTable from "drip-table";
16+
import DripTableDriverAntDesign from "drip-table-driver-antd";
17+
import "antd/dist/antd.css";
18+
import "drip-table/dist/index.css";
19+
20+
const schema = {
21+
id: 'sample-table-root',
22+
rowKey: "id",
23+
rowSelection: true,
24+
columns: [
25+
{
26+
key: "mock_1",
27+
title: "商品名称",
28+
dataIndex: "name",
29+
component: "text",
30+
options: { mode: "single", maxRow: 1 },
31+
},
32+
{
33+
key: "mock_2",
34+
title: "商品详情",
35+
align: "center",
36+
dataIndex: "description",
37+
component: "text",
38+
options: { mode: "single", ellipsis: true, maxRow: 1 },
39+
},
40+
],
41+
subtable: {
42+
id: 'sample-table-sub-level-1',
43+
dataSourceKey: 'subtable',
44+
rowKey: "id",
45+
rowSelection: true,
46+
columns: [
47+
{
48+
key: 'mock_1',
49+
title: '页面名称',
50+
align: 'center',
51+
dataIndex: 'name',
52+
component: 'text',
53+
options: {
54+
mode: 'single',
55+
maxRow: 1,
56+
},
57+
},
58+
{
59+
key: 'mock_2',
60+
title: '开始/结束时间',
61+
align: 'center',
62+
hidable: true,
63+
dataIndex: 'description',
64+
component: 'text',
65+
options: {
66+
mode: 'single',
67+
ellipsis: true,
68+
maxRow: 3,
69+
},
70+
},
71+
],
72+
showHeader: false,
73+
bordered: true,
74+
subtable: {
75+
id: 'sample-table-sub-level-2',
76+
dataSourceKey: 'subtableLevel2',
77+
rowKey: "id",
78+
rowSelection: true,
79+
columns: [
80+
{
81+
key: 'mock_1',
82+
title: '页面名称',
83+
align: 'center',
84+
dataIndex: 'name',
85+
component: 'text',
86+
options: {
87+
mode: 'single',
88+
maxRow: 1,
89+
},
90+
},
91+
{
92+
key: 'mock_7',
93+
title: '操作',
94+
align: 'center',
95+
hidable: true,
96+
dataIndex: 'operate',
97+
component: 'link',
98+
options: {
99+
mode: 'multiple',
100+
operates: [
101+
{ name: 'order', label: '订购', href: './#order', target: '_blank' },
102+
{ name: 'view', label: '查看', href: './#view' },
103+
{ name: 'edit', label: '编辑', event: 'edit' },
104+
{ name: 'remove', label: '删除', event: 'remove' },
105+
],
106+
},
107+
},
108+
],
109+
},
110+
},
111+
};
112+
113+
const dataSource = [
114+
{
115+
id: 1,
116+
name: "商品一",
117+
price: 7999,
118+
status: "onSale",
119+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
120+
subtable: [
121+
{
122+
id: '1-1',
123+
name: '苹果',
124+
description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素',
125+
status: 'onSale',
126+
price: 799,
127+
subtableLevel2: [
128+
{ id: '1-1-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
129+
],
130+
},
131+
{
132+
id: '1-2',
133+
name: '梨',
134+
description: '通常是一种落叶乔木或灌木，极少数品种为常绿，属于蔷薇目蔷薇科苹果族',
135+
status: 'onSale',
136+
price: 799,
137+
subtableLevel2: [
138+
{ id: '1-2-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
139+
],
140+
},
141+
],
142+
},
143+
{
144+
id: 2,
145+
name: "商品二",
146+
price: 7999,
147+
status: "onSale",
148+
description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
149+
subtable: [
150+
{
151+
id: '2-1',
152+
name: '苹果',
153+
description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素',
154+
status: 'onSale',
155+
price: 799,
156+
subtableLevel2: [
157+
{ id: '2-1-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
158+
],
159+
},
160+
{
161+
id: '2-2',
162+
name: '梨',
163+
description: '通常是一种落叶乔木或灌木，极少数品种为常绿，属于蔷薇目蔷薇科苹果族',
164+
status: 'onSale',
165+
price: 799,
166+
subtableLevel2: [
167+
{ id: '2-2-1', name: '苹果', description: '是苹果树的果实，一般呈紅色，但需視品種而定，富含矿物质和维生素', status: 'onSale', price: 799 },
168+
],
169+
},
170+
],
171+
},
172+
];
173+
174+
const Demo = () => {
175+
return (
176+
<DripTable
177+
driver={DripTableDriverAntDesign}
178+
schema={schema}
179+
dataSource={dataSource}
180+
defaultExpandedRowKeys={[1]}
181+
/>
182+
);
183+
};
184+
185+
export default Demo;
186+
```

0 commit comments

Comments
 (0)