Skip to content

Commit 3ca81a4

Browse files
2betop2betop
authored
Revert "feat: Table 优化大数据性能 (#11915)" (#11920)
This reverts commit 470e97c.
1 parent 5319437 commit 3ca81a4

File tree

8 files changed

+86
-233
lines changed

8 files changed

+86
-233
lines changed

‎examples/components/CRUD/TableAutoFill.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@ export default {
143143
{
144144
name: 'id',
145145
label: 'ID',
146-
width: 50,
147146
searchable: {
148147
type: 'input-text',
149148
name: 'id',

‎packages/amis-core/src/store/table.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,9 @@ export const Row = types
202202
loaded: false, // 懒数据是否加载完了
203203
loading: false, // 懒数据是否正在加载
204204
error: '', // 懒数据加载失败的错误信息
205-
depth: types.number // 当前children位于第几层，便于使用getParent获取最顶层TableStore
205+
depth: types.number, // 当前children位于第几层，便于使用getParent获取最顶层TableStore
206+
appeared: true,
207+
lazyRender: false
206208
})
207209
.views(self => ({
208210
get parent() {
@@ -484,6 +486,10 @@ export const Row = types
484486
}
485487
},
486488

489+
markAppeared(value: any) {
490+
value && (self.appeared = !!value);
491+
},
492+
487493
markLoading(value: any) {
488494
self.loading = !!value;
489495
},
@@ -586,7 +592,7 @@ export const TableStore = iRendererStore
586592
exportExcelLoading: false,
587593
searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
588594
lazyRenderAfter: 100,
589-
tableLayoutConfig: 'auto',
595+
tableLayout: 'auto',
590596
theadHeight: 0,
591597
persistKey: ''
592598
})
@@ -843,14 +849,6 @@ export const TableStore = iRendererStore
843849
return getEnv(self).translate;
844850
},
845851

846-
get tableLayout() {
847-
if (self.rows.length > self.lazyRenderAfter) {
848-
return 'fixed';
849-
}
850-
851-
return self.tableLayoutConfig;
852-
},
853-
854852
getSelectionUpperLimit,
855853

856854
get columnsKey() {
@@ -1221,8 +1219,8 @@ export const TableStore = iRendererStore
12211219
typeof config.lazyRenderAfter === 'number' &&
12221220
(self.lazyRenderAfter = config.lazyRenderAfter);
12231221

1224-
typeof config.tableLayoutConfig === 'string' &&
1225-
(self.tableLayoutConfig = config.tableLayoutConfig);
1222+
typeof config.tableLayout === 'string' &&
1223+
(self.tableLayout = config.tableLayout);
12261224

12271225
config.showIndex !== undefined && (self.showIndex = config.showIndex);
12281226
config.persistKey !== undefined && (self.persistKey = config.persistKey);
@@ -1615,6 +1613,21 @@ export const TableStore = iRendererStore
16151613
);
16161614

16171615
if (!allMatched) {
1616+
// 前 20 个直接渲染，后面的按需渲染
1617+
if (
1618+
self.lazyRenderAfter &&
1619+
self.falttenedRows.length > self.lazyRenderAfter
1620+
) {
1621+
for (
1622+
let i = self.lazyRenderAfter, len = self.falttenedRows.length;
1623+
i < len;
1624+
i++
1625+
) {
1626+
self.falttenedRows[i].appeared = false;
1627+
self.falttenedRows[i].lazyRender = true;
1628+
}
1629+
}
1630+
16181631
const expand = self.footable && self.footable.expand;
16191632
if (
16201633
expand === 'first' ||

‎packages/amis-ui/scss/components/_table.scss‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -184,45 +184,6 @@
184184
min-height: 0.01%;
185185
overflow-x: auto;
186186
transform: translateZ(0);
187-
188-
&.use-virtual-list {
189-
> table > .virtual-table-body-placeholder {
190-
> tr {
191-
padding: 0 !important;
192-
margin: 0 !important;
193-
border: 0 !important;
194-
background: transparent !important;
195-
}
196-
> tr > td {
197-
padding: 0 !important;
198-
margin: 0 !important;
199-
border: 0 !important;
200-
background: transparent !important;
201-
202-
> div {
203-
display: block;
204-
height: 0;
205-
width: 50px;
206-
position: sticky;
207-
left: 0;
208-
will-change: height;
209-
transform: translateZ(0);
210-
contain: content;
211-
}
212-
}
213-
}
214-
215-
> table > .virtual-table-body-placeholder.leading > tr > td > div {
216-
height: var(--Table-scroll-offset);
217-
}
218-
219-
> table > .virtual-table-body-placeholder.trailing > tr > td > div {
220-
height: calc(
221-
var(--Table-scroll-height) - var(--Table-frame-height) -
222-
var(--Table-scroll-offset)
223-
);
224-
}
225-
}
226187
}
227188

228189
&-content-colDragLine {

‎packages/amis/src/renderers/Table/TableBody.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import {createObject} from 'amis-core';
99
import {LocaleProps} from 'amis-core';
1010
import {ActionSchema} from '../Action';
1111
import type {IColumn, IRow, ITableStore, TestIdBuilder} from 'amis-core';
12-
import flatten from 'lodash/flatten';
13-
import {VirtualTableBody} from './VirtualTableBody';
1412

1513
export interface TableBodyProps extends LocaleProps {
1614
store: ITableStore;
@@ -366,7 +364,6 @@ export class TableBody<
366364
classnames: cx,
367365
className,
368366
render,
369-
store,
370367
rows,
371368
columns,
372369
rowsProps,
@@ -375,17 +372,16 @@ export class TableBody<
375372
translate: __
376373
} = this.props;
377374

378-
const doms: React.ReactNode[] = flatten(
379-
[]
380-
.concat(this.renderSummary('prefix', prefixRow) as any)
381-
.concat(this.renderRows(rows, columns, rowsProps) as any)
382-
.concat(this.renderSummary('affix', affixRow) as any)
383-
).filter(Boolean);
384-
385-
return rows.length > store.lazyRenderAfter ? (
386-
<VirtualTableBody rows={doms} store={this.props.store} />
387-
) : (
388-
<tbody className={className}>{doms}</tbody>
375+
return (
376+
<tbody className={className}>
377+
{rows.length ? (
378+
<>
379+
{this.renderSummary('prefix', prefixRow)}
380+
{this.renderRows(rows, columns, rowsProps)}
381+
{this.renderSummary('affix', affixRow)}
382+
</>
383+
) : null}
384+
</tbody>
389385
);
390386
}
391387
}

‎packages/amis/src/renderers/Table/TableRow.tsx‎

Lines changed: 49 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export class TableRow<
6767
moved: boolean;
6868
depth: number;
6969
expandable: boolean;
70+
appeard?: boolean;
7071
loading?: boolean;
7172
error?: string;
7273
checkdisable: boolean;
@@ -204,6 +205,7 @@ export class TableRow<
204205
moved,
205206
depth,
206207
expandable,
208+
appeard,
207209
checkdisable,
208210
trRef,
209211
isNested,
@@ -261,22 +263,28 @@ export class TableRow<
261263
</th>
262264
) : null}
263265

264-
{renderCell(
265-
`${regionPrefix}${itemIndex}/${column.index}`,
266-
column,
267-
item,
268-
{
269-
...rest,
270-
width: null,
271-
rowIndex: itemIndex,
272-
rowIndexPath: item.path,
273-
colIndex: column.index,
274-
rowPath,
275-
key: column.id,
276-
onAction: this.handleAction,
277-
onQuickChange: this.handleQuickChange,
278-
onChange: this.handleChange
279-
}
266+
{appeard ? (
267+
renderCell(
268+
`${regionPrefix}${itemIndex}/${column.index}`,
269+
column,
270+
item,
271+
{
272+
...rest,
273+
width: null,
274+
rowIndex: itemIndex,
275+
rowIndexPath: item.path,
276+
colIndex: column.index,
277+
rowPath,
278+
key: column.id,
279+
onAction: this.handleAction,
280+
onQuickChange: this.handleQuickChange,
281+
onChange: this.handleChange
282+
}
283+
)
284+
) : (
285+
<td key={column.id}>
286+
<div className={cx('Table-emptyBlock')}>&nbsp;</div>
287+
</td>
280288
)}
281289
</tr>
282290
))}
@@ -323,17 +331,23 @@ export class TableRow<
323331
{...testIdBuilder?.(rowPath)?.getTestId()}
324332
>
325333
{columns.map(column =>
326-
renderCell(`${itemIndex}/${column.index}`, column, item, {
327-
...rest,
328-
rowIndex: itemIndex,
329-
colIndex: column.index,
330-
rowIndexPath: item.path,
331-
rowPath,
332-
key: column.id,
333-
onAction: this.handleAction,
334-
onQuickChange: this.handleQuickChange,
335-
onChange: this.handleChange
336-
})
334+
appeard ? (
335+
renderCell(`${itemIndex}/${column.index}`, column, item, {
336+
...rest,
337+
rowIndex: itemIndex,
338+
colIndex: column.index,
339+
rowIndexPath: item.path,
340+
rowPath,
341+
key: column.id,
342+
onAction: this.handleAction,
343+
onQuickChange: this.handleQuickChange,
344+
onChange: this.handleChange
345+
})
346+
) : column.name && item.rowSpans[column.name] === 0 ? null : (
347+
<td key={column.id}>
348+
<div className={cx('Table-emptyBlock')}>&nbsp;</div>
349+
</td>
350+
)
337351
)}
338352
</tr>
339353
);
@@ -350,9 +364,16 @@ export default observer((props: TableRowProps) => {
350364
store.canAccessSuperData ||
351365
columns.some(item => item.pristine.canAccessSuperData);
352366

367+
const {ref, inView} = useInView({
368+
threshold: 0,
369+
onChange: item.markAppeared,
370+
skip: !item.lazyRender
371+
});
372+
353373
return (
354374
<TableRow
355375
{...props}
376+
trRef={ref}
356377
expanded={item.expanded}
357378
parentExpanded={parent?.expanded}
358379
id={item.id}
@@ -370,6 +391,7 @@ export default observer((props: TableRowProps) => {
370391
// data 在 TableRow 里面没有使用，这里写上是为了当列数据变化的时候 TableRow 重新渲染，
371392
// 不是 item.locals 的原因是 item.locals 会变化多次，比如父级上下文变化也会进来，但是 item.data 只会变化一次。
372393
data={canAccessSuperData ? item.locals : item.data}
394+
appeard={item.lazyRender ? item.appeared || inView : true}
373395
isNested={store.isNested}
374396
/>
375397
);

‎packages/amis/src/renderers/Table/VCell.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)