Skip to content

Commit 56c464e

Browse files
zFitnesszFitness
authored
Merge pull request #8 from zFitness/master
fix: table rowKey 处理
2 parents 1f2b55a + ca9e69c commit 56c464e

3 files changed

Lines changed: 78 additions & 43 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Changelog
22

3+
# <<<<<<< HEAD
4+
35
## v1.0.0-beta.11(2022-07-07)
46

57
### :tada: Enhancements
@@ -46,6 +48,8 @@
4648

4749
### No Change Log
4850

51+
> > > > > > > 1f2b55a95de82cc71138df5ced5fb00aacbaafbf
52+
4953
## v1.0.0-beta.5(2022-07-04)
5054

5155
### No Change Log
@@ -58,66 +62,66 @@
5862

5963
### :bug: Bug Fixes
6064

61-
1. [fix: test](https://github.com/formilyjs/tdesign-react/commit/1733fc9) :point_right: ( [zfitness](https://github.com/zfitness) )
65+
1. [fix: test](https://github.com/zFitness/formily-tdesign-react/commit/1733fc9) :point_right: ( [zfitness](https://github.com/zfitness) )
6266

6367
## v1.0.0-beta.2(2022-07-04)
6468

6569
### :tada: Enhancements
6670

67-
1. [feat: jest](https://github.com/formilyjs/tdesign-react/commit/cbe8832) :point_right: ( [zfitness](https://github.com/zfitness) )
71+
1. [feat: jest](https://github.com/zFitness/formily-tdesign-react/commit/cbe8832) :point_right: ( [zfitness](https://github.com/zfitness) )
6872

6973
## v1.0.0-beta.1(2022-07-04)
7074

7175
### :bug: Bug Fixes
7276

73-
1. [fix: ts 错误](https://github.com/formilyjs/tdesign-react/commit/09a6440) :point_right: ( [zfitness](https://github.com/zfitness) )
77+
1. [fix: ts 错误](https://github.com/zFitness/formily-tdesign-react/commit/09a6440) :point_right: ( [zfitness](https://github.com/zfitness) )
7478

7579
## v1.0.0-beta.0(2022-07-03)
7680

7781
### :tada: Enhancements
7882

79-
1. [feat: style](https://github.com/formilyjs/tdesign-react/commit/5140cdf) :point_right: ( [zfitness](https://github.com/zfitness) )
83+
1. [feat: style](https://github.com/zFitness/formily-tdesign-react/commit/5140cdf) :point_right: ( [zfitness](https://github.com/zfitness) )
8084

81-
1. [feat: 文案调整](https://github.com/formilyjs/tdesign-react/commit/deb8c8d) :point_right: ( [郑淼](https://github.com/郑淼) )
85+
1. [feat: 文案调整](https://github.com/zFitness/formily-tdesign-react/commit/deb8c8d) :point_right: ( [郑淼](https://github.com/郑淼) )
8286

83-
1. [feat: upload](https://github.com/formilyjs/tdesign-react/commit/300da48) :point_right: ( [郑淼](https://github.com/郑淼) )
87+
1. [feat: upload](https://github.com/zFitness/formily-tdesign-react/commit/300da48) :point_right: ( [郑淼](https://github.com/郑淼) )
8488

85-
1. [feat: preview-text](https://github.com/formilyjs/tdesign-react/commit/b8816d3) :point_right: ( [郑淼](https://github.com/郑淼) )
89+
1. [feat: preview-text](https://github.com/zFitness/formily-tdesign-react/commit/b8816d3) :point_right: ( [郑淼](https://github.com/郑淼) )
8690

87-
1. [feat: form-grid](https://github.com/formilyjs/tdesign-react/commit/39be38d) :point_right: ( [郑淼](https://github.com/郑淼) )
91+
1. [feat: form-grid](https://github.com/zFitness/formily-tdesign-react/commit/39be38d) :point_right: ( [郑淼](https://github.com/郑淼) )
8892

89-
1. [feat: 升级依赖](https://github.com/formilyjs/tdesign-react/commit/e82b988) :point_right: ( [zfitness](https://github.com/zfitness) )
93+
1. [feat: 升级依赖](https://github.com/zFitness/formily-tdesign-react/commit/e82b988) :point_right: ( [zfitness](https://github.com/zfitness) )
9094

91-
1. [feat: editable](https://github.com/formilyjs/tdesign-react/commit/751f24d) :point_right: ( [郑淼](https://github.com/郑淼) )
95+
1. [feat: editable](https://github.com/zFitness/formily-tdesign-react/commit/751f24d) :point_right: ( [郑淼](https://github.com/郑淼) )
9296

93-
1. [feat: arraytabs](https://github.com/formilyjs/tdesign-react/commit/4e4491d) :point_right: ( [郑淼](https://github.com/郑淼) )
97+
1. [feat: arraytabs](https://github.com/zFitness/formily-tdesign-react/commit/4e4491d) :point_right: ( [郑淼](https://github.com/郑淼) )
9498

95-
1. [feat: 日期组件](https://github.com/formilyjs/tdesign-react/commit/a734d5c) :point_right: ( [郑淼](https://github.com/郑淼) )
99+
1. [feat: 日期组件](https://github.com/zFitness/formily-tdesign-react/commit/a734d5c) :point_right: ( [郑淼](https://github.com/郑淼) )
96100

97-
1. [feat: publish](https://github.com/formilyjs/tdesign-react/commit/2eeb303) :point_right: ( [zfitness](https://github.com/zfitness) )
101+
1. [feat: publish](https://github.com/zFitness/formily-tdesign-react/commit/2eeb303) :point_right: ( [zfitness](https://github.com/zfitness) )
98102

99-
1. [feat: 构建配置](https://github.com/formilyjs/tdesign-react/commit/088382e) :point_right: ( [zfitness](https://github.com/zfitness) )
103+
1. [feat: 构建配置](https://github.com/zFitness/formily-tdesign-react/commit/088382e) :point_right: ( [zfitness](https://github.com/zfitness) )
100104

101-
1. [feat: 去掉无用的样式](https://github.com/formilyjs/tdesign-react/commit/288d6a5) :point_right: ( [zfitness](https://github.com/zfitness) )
105+
1. [feat: 去掉无用的样式](https://github.com/zFitness/formily-tdesign-react/commit/288d6a5) :point_right: ( [zfitness](https://github.com/zfitness) )
102106

103-
1. [feat: tdesign 组件库](https://github.com/formilyjs/tdesign-react/commit/c7dfe0f) :point_right: ( [zfitness](https://github.com/zfitness) )
107+
1. [feat: tdesign 组件库](https://github.com/zFitness/formily-tdesign-react/commit/c7dfe0f) :point_right: ( [zfitness](https://github.com/zfitness) )
104108

105-
1. [feat: 去除国际化](https://github.com/formilyjs/tdesign-react/commit/0dfbe54) :point_right: ( [zfitness](https://github.com/zfitness) )
109+
1. [feat: 去除国际化](https://github.com/zFitness/formily-tdesign-react/commit/0dfbe54) :point_right: ( [zfitness](https://github.com/zfitness) )
106110

107-
1. [feat: init](https://github.com/formilyjs/tdesign-react/commit/2ed6271) :point_right: ( [zfitness](https://github.com/zfitness) )
111+
1. [feat: init](https://github.com/zFitness/formily-tdesign-react/commit/2ed6271) :point_right: ( [zfitness](https://github.com/zfitness) )
108112

109113
### :bug: Bug Fixes
110114

111-
1. [fix: timePicker 宽度](https://github.com/formilyjs/tdesign-react/commit/b8b61ec) :point_right: ( [郑淼](https://github.com/郑淼) )
115+
1. [fix: timePicker 宽度](https://github.com/zFitness/formily-tdesign-react/commit/b8b61ec) :point_right: ( [郑淼](https://github.com/郑淼) )
112116

113-
1. [fix: datepicker 空值](https://github.com/formilyjs/tdesign-react/commit/65e4fb7) :point_right: ( [郑淼](https://github.com/郑淼) )
117+
1. [fix: datepicker 空值](https://github.com/zFitness/formily-tdesign-react/commit/65e4fb7) :point_right: ( [郑淼](https://github.com/郑淼) )
114118

115-
1. [fix: 打包文档没有 tdesign 样式](https://github.com/formilyjs/tdesign-react/commit/95fbec7) :point_right: ( [zfitness](https://github.com/zfitness) )
119+
1. [fix: 打包文档没有 tdesign 样式](https://github.com/zFitness/formily-tdesign-react/commit/95fbec7) :point_right: ( [zfitness](https://github.com/zfitness) )
116120

117-
1. [fix: icon tooltip](https://github.com/formilyjs/tdesign-react/commit/704ec78) :point_right: ( [zfitness](https://github.com/zfitness) )
121+
1. [fix: icon tooltip](https://github.com/zFitness/formily-tdesign-react/commit/704ec78) :point_right: ( [zfitness](https://github.com/zfitness) )
118122

119-
1. [fix: label 溢出](https://github.com/formilyjs/tdesign-react/commit/cae0b16) :point_right: ( [zfitness](https://github.com/zfitness) )
123+
1. [fix: label 溢出](https://github.com/zFitness/formily-tdesign-react/commit/cae0b16) :point_right: ( [zfitness](https://github.com/zfitness) )
120124

121125
### :hammer_and_wrench: Update Workflow Scripts
122126

123-
1. [build](https://github.com/formilyjs/tdesign-react/commit/9d4f453) :point_right: ( [zfitness](https://github.com/zfitness) )
127+
1. [build](https://github.com/zFitness/formily-tdesign-react/commit/9d4f453) :point_right: ( [zfitness](https://github.com/zfitness) )

‎docs/components/ArrayTables.md‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,43 @@
44
>
55
> 注意：该组件只适用于 Schema 场景，且只能是对象数组
66
7+
## 自增主键处理
8+
9+
> 由于目前 tdesign 的 table 暂时不支持设置 rowKey 为一个函数，所以需要为数据制定一个唯一的 key， 这个 key 不能是表单项的 name, table 内部会用数据项的 index 作为 key 的值。
10+
11+
```tsx | pure
12+
<SchemaField.Array
13+
name="array"
14+
x-decorator="FormItem"
15+
x-component="ArrayTable"
16+
x-component-props={{
17+
rowKey: 'rowKey',
18+
}}
19+
>
20+
```
21+
22+
## 排序
23+
24+
> 制定 Column 的 dataIndex 字段为 drag, ArrayTable.SortHandle 只是一个默认图标，可以替换
25+
26+
```tsx | pure
27+
<SchemaField.Void
28+
x-component="ArrayTable.Column"
29+
x-component-props={{
30+
width: 80,
31+
title: 'Sort',
32+
dataIndex: 'drag',
33+
align: 'center',
34+
}}
35+
>
36+
<SchemaField.Void
37+
x-decorator="FormItem"
38+
required
39+
x-component="ArrayTable.SortHandle"
40+
/>
41+
</SchemaField.Void>
42+
```
43+
744
## Markup Schema 案例
845

946
```tsx
@@ -31,10 +68,7 @@ const SchemaField = createSchemaField({
3168

3269
const form = createForm()
3370

34-
const range = (count: number) =>
35-
Array.from(new Array(count)).map((_, key) => ({
36-
rowKey: key,
37-
}))
71+
const range = (count: number) => Array.from(new Array(count))
3872

3973
export default () => {
4074
return (
@@ -45,8 +79,7 @@ export default () => {
4579
x-decorator="FormItem"
4680
x-component="ArrayTable"
4781
x-component-props={{
48-
pagination: { pageSize: 10 },
49-
scroll: { x: '100%' },
82+
rowKey: 'rowKey',
5083
}}
5184
>
5285
<SchemaField.Object>
@@ -97,7 +130,7 @@ export default () => {
97130
>
98131
<SchemaField.String
99132
x-decorator="FormItem"
100-
name="rowKey"
133+
name="a2"
101134
x-component="Input"
102135
/>
103136
</SchemaField.Void>
@@ -139,7 +172,7 @@ export default () => {
139172
block
140173
onClick={() => {
141174
form.setValues({
142-
array: range(8),
175+
array: range(10000),
143176
})
144177
}}
145178
>
@@ -149,7 +182,6 @@ export default () => {
149182
<Alert
150183
style={{ marginTop: 10 }}
151184
message="注意：开启formily插件的页面，因为后台有数据通信，会占用浏览器算力，最好在无痕模式(无formily插件)下测试"
152-
type="warning"
153185
/>
154186
</FormProvider>
155187
)

‎packages/components/src/array-table/index.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ const ArrayTablePagination: React.FC<IArrayTablePaginationProps> = (props) => {
261261
pageSize={pageSize}
262262
current={current}
263263
total={data.length}
264-
showPageNumber={false}
264+
showPageSize={false}
265265
onChange={(pageInfo) => {
266266
handleChange(pageInfo.current)
267267
}}
@@ -286,34 +286,33 @@ export const ArrayTable: ComposedArrayTable = observer((props: TableProps) => {
286286
const ref = useRef<HTMLDivElement>()
287287
const field = useField<ArrayField>()
288288
const prefixCls = usePrefixCls('formily-array-table')
289-
const data = Array.isArray(field.value) ? field.value.slice() : []
289+
const rowKey = props.rowKey || 'id'
290+
const data = Array.isArray(field.value)
291+
? field.value.map((item, index) => ({ [rowKey]: index, ...item }))
292+
: []
290293
const sources = useArrayTableSources()
291294
const columns = useArrayTableColumns(data, sources)
292295
const pagination = isBool(props.pagination) ? {} : props.pagination
293296
const addition = useAddition()
294-
// const defaultRowKey = (record: any) => {
295-
// return data.indexOf(record)
296-
// }
297297

298298
return (
299299
<ArrayTablePagination {...pagination} data={data}>
300300
{(_data, pager) => (
301301
<div ref={ref} className={prefixCls}>
302302
<ArrayBase>
303303
<Table
304+
{...props}
304305
size="medium"
305-
// tableLayout="fixed"
306-
// verticalAlign="middle"
307-
// size="small"
308-
rowKey="rowKey"
306+
rowKey={rowKey}
309307
disableDataPage={false}
310308
columns={columns}
311309
data={_data}
310+
footData={[{}]}
312311
dragSort="row-handler"
313312
onDragSort={({ currentIndex, targetIndex }) => {
314313
field.move(currentIndex, targetIndex)
315314
}}
316-
{...props}
315+
pagination={null}
317316
/>
318317
<div style={{ marginTop: 5, marginBottom: 5 }}>{pager}</div>
319318

0 commit comments

Comments
 (0)