diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index be5fd5e60..b395debd2 100644 --- a/packages/amis-core/src/store/table.ts +++ b/packages/amis-core/src/store/table.ts @@ -785,7 +785,7 @@ export const TableStore = iRendererStore }, get columnWidthReady() { - return getFilteredColumns().every(column => column.width); + return getFilteredColumns().every(column => column.realWidth); }, getStickyStyles(column: IColumn, columns: Array) { @@ -1036,11 +1036,11 @@ export const TableStore = iRendererStore const tableWidth = table.parentElement!.offsetWidth; const thead = table.querySelector(':scope>thead')!; let tbody: HTMLElement | null = null; - const div = document.createElement('div'); - div.className = 'amis-scope'; // jssdk 里面 css 会在这一层 - div.style.cssText += `visibility: hidden!important;`; const htmls: Array = []; const isFixed = self.tableLayout === 'fixed'; + const someSettedWidth = self.columns.some( + column => column.pristine.width + ); const minWidths: { [propName: string]: number; @@ -1054,17 +1054,27 @@ export const TableStore = iRendererStore ); } - htmls.push( - `${thead.outerHTML}${ - tbody ? `${tbody.innerHTML}` : '' - }
` - ); + if (someSettedWidth || isFixed) { + htmls.push( + `${thead.outerHTML}${ + tbody ? `${tbody.innerHTML}` : '' + }
` + ); + } + if (!htmls.length) { + return; + } + + const div = document.createElement('div'); + div.className = 'amis-scope'; // jssdk 里面 css 会在这一层 + div.style.cssText += `visibility: hidden!important;`; div.innerHTML = htmls.join(''); let ths1: Array = []; + let ths2: Array = []; if (isFixed) { ths1 = [].slice.call( @@ -1074,9 +1084,13 @@ export const TableStore = iRendererStore ); } - const ths2: Array = [].slice.call( - div.querySelectorAll(':scope>table:last-child>thead>tr>th[data-index]') - ); + if (someSettedWidth || isFixed) { + ths2 = [].slice.call( + div.querySelectorAll( + ':scope>table:last-child>thead>tr>th[data-index]' + ) + ); + } ths1.forEach(th => { th.style.cssText += 'width: 0'; @@ -1106,14 +1120,16 @@ export const TableStore = iRendererStore ths2.forEach((col: HTMLElement) => { const index = parseInt(col.getAttribute('data-index')!, 10); const column = self.columns[index]; - column.setWidth( - Math.max( - typeof column.pristine.width === 'number' - ? column.pristine.width - : col.clientWidth, - minWidths[index] || 0 - ) - ); + if (column.pristine.width || isFixed) { + column.setWidth( + Math.max( + typeof column.pristine.width === 'number' + ? column.pristine.width + : col.clientWidth, + minWidths[index] || 0 + ) + ); + } }); document.body.removeChild(div); @@ -1134,10 +1150,6 @@ export const TableStore = iRendererStore }); } - function invalidTableColumnWidth() { - self.columns.forEach(column => column.setWidth(0)); - } - function combineCell(arr: Array, keys: Array): Array { if (!keys.length || !arr.length) { return arr; @@ -1740,7 +1752,6 @@ export const TableStore = iRendererStore updateColumns, initTableWidth, syncTableWidth, - invalidTableColumnWidth, initRows, updateSelected, toggleAll, diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap index 316d65941..2334848bb 100644 --- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap +++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap @@ -259,7 +259,6 @@ exports[`doAction:crud reload 1`] = ` class="cxd-Spinner-icon cxd-Spinner-icon--default" /> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
JSX.Element; + store: ITableStore; + multiple: boolean; + canAccessSuperData?: boolean; + itemBadge?: BadgeObject; + onCheck?: (item: IRow) => void; + onDragStart?: (e: React.DragEvent) => void; + popOverContainer?: any; + quickEditFormRef: any; + onImageEnlarge?: any; +} + +export default function Cell({ + region, + column, + item, + props, + ignoreDrag, + render, + store, + multiple, + itemBadge, + classnames: cx, + classPrefix: ns, + canAccessSuperData, + onCheck, + onDragStart, + popOverContainer, + quickEditFormRef, + onImageEnlarge +}: CellProps) { + if (column.name && item.rowSpans[column.name] === 0) { + return null; + } + + const [style, stickyClassName]: any = React.useMemo(() => { + const style = {...column.pristine.style}; + const [stickyStyle, stickyClassName] = store.getStickyStyles( + column, + store.filteredColumns + ); + return [Object.assign(style, stickyStyle), stickyClassName]; + }, []); + + const onCheckboxChange = React.useCallback(() => { + onCheck?.(item); + }, []); + + if (column.type === '__checkme') { + return ( + + + + ); + } else if (column.type === '__dragme') { + return ( + + {item.draggable ? : null} + + ); + } else if (column.type === '__expandme') { + return ( + + {item.expandable ? ( + + + + ) : null} + + ); + } + + let [prefix, affix, addtionalClassName] = React.useMemo(() => { + let prefix: React.ReactNode[] = []; + let affix: React.ReactNode[] = []; + let addtionalClassName = ''; + + if (column.isPrimary && store.isNested) { + addtionalClassName = 'Table-primayCell'; + prefix.push( + + ); + prefix.push( + item.expandable ? ( + + + + ) : ( + + ) + ); + } + + if ( + !ignoreDrag && + column.isPrimary && + store.isNested && + store.draggable && + item.draggable + ) { + affix.push( + + + + ); + } + return [prefix, affix, addtionalClassName]; + }, [item.expandable, item.expanded]); + const data = React.useMemo(() => item.locals, [JSON.stringify(item.locals)]); + + const finalCanAccessSuperData = + column.pristine.canAccessSuperData ?? canAccessSuperData; + const subProps: any = { + ...props, + // 操作列不下发loading，否则会导致操作栏里面的所有按钮都出现loading + loading: column.type === 'operation' ? false : props.loading, + btnDisabled: store.dragging, + data: data, + value: column.name + ? resolveVariable( + column.name, + finalCanAccessSuperData ? item.locals : item.data + ) + : column.value, + popOverContainer: popOverContainer, + rowSpan: item.rowSpans[column.name as string], + quickEditFormRef: quickEditFormRef, + cellPrefix: prefix, + cellAffix: affix, + onImageEnlarge: onImageEnlarge, + canAccessSuperData: finalCanAccessSuperData, + row: item, + itemBadge, + showBadge: + !props.isHead && + itemBadge && + store.firstToggledColumnIndex === props.colIndex, + onQuery: undefined, + style, + className: cx( + column.pristine.className, + stickyClassName, + addtionalClassName + ), + /** 给子节点的设置默认值，避免取到env.affixHeader的默认值，导致表头覆盖首行 */ + affixOffsetTop: 0 + }; + delete subProps.label; + + return render( + region, + { + ...column.pristine, + column: column.pristine, + type: 'cell' + }, + subProps + ); +} diff --git a/packages/amis/src/renderers/Table/ColGroup.tsx b/packages/amis/src/renderers/Table/ColGroup.tsx index 819150acb..c745af55c 100644 --- a/packages/amis/src/renderers/Table/ColGroup.tsx +++ b/packages/amis/src/renderers/Table/ColGroup.tsx @@ -13,9 +13,10 @@ export function ColGroup({ React.useEffect(() => { if (domRef.current) { + store.initTableWidth(); store.syncTableWidth(); } - }); + }, []); React.useEffect(() => { const table = domRef.current!.parentElement!; @@ -37,7 +38,7 @@ export function ColGroup({ {columns.map(column => { const style: any = {}; - if (store.columnWidthReady) { + if (store.columnWidthReady && column.width) { style.width = column.width; } else if (column.pristine.width) { style.width = column.pristine.width; diff --git a/packages/amis/src/renderers/Table/TableRow.tsx b/packages/amis/src/renderers/Table/TableRow.tsx index 1e0a05dfd..fef111005 100644 --- a/packages/amis/src/renderers/Table/TableRow.tsx +++ b/packages/amis/src/renderers/Table/TableRow.tsx @@ -179,6 +179,7 @@ export class TableRow extends React.PureComponent< onEvent, expanded, + parentExpanded, id, newIndex, isHover, @@ -188,7 +189,9 @@ export class TableRow extends React.PureComponent< depth, expandable, appeard, + checkdisable, trRef, + isNested, ...rest } = this.props; diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx index 2b4370fbe..bd77b2084 100644 --- a/packages/amis/src/renderers/Table/index.tsx +++ b/packages/amis/src/renderers/Table/index.tsx @@ -69,6 +69,7 @@ import omit from 'lodash/omit'; import ColGroup from './ColGroup'; import debounce from 'lodash/debounce'; import AutoFilterForm from './AutoFilterForm'; +import Cell from './Cell'; /** * 表格列，不指定类型时默认为文本类型。 @@ -547,7 +548,6 @@ export default class Table extends React.Component { this.tableRef = this.tableRef.bind(this); this.affixedTableRef = this.affixedTableRef.bind(this); this.updateTableInfo = this.updateTableInfo.bind(this); - this.updateTableInfoRef = this.updateTableInfoRef.bind(this); this.handleAction = this.handleAction.bind(this); this.handleCheck = this.handleCheck.bind(this); this.handleCheckAll = this.handleCheckAll.bind(this); @@ -1238,13 +1238,6 @@ export default class Table extends React.Component { callback && setTimeout(callback, 20); } - updateTableInfoRef(ref: any) { - if (!ref) { - return; - } - this.updateTableInfo(); - } - // 当表格滚动是，需要让 affixHeader 部分的表格也滚动 handleOutterScroll() { const table = this.table as HTMLElement; @@ -2018,168 +2011,31 @@ export default class Table extends React.Component { classnames: cx, checkOnItemClick, popOverContainer, + canAccessSuperData, itemBadge } = this.props; - if (column.name && item.rowSpans[column.name] === 0) { - return null; - } - - const style: any = {...column.pristine.style}; - const [stickyStyle, stickyClassName] = store.getStickyStyles( - column, - store.filteredColumns - ); - Object.assign(style, stickyStyle); - - if (column.type === '__checkme') { - return ( - - - - ); - } else if (column.type === '__dragme') { - return ( - - {item.draggable ? : null} - - ); - } else if (column.type === '__expandme') { - return ( - - {item.expandable ? ( - - - - ) : null} - - ); - } - - let prefix: React.ReactNode[] = []; - let affix: React.ReactNode[] = []; - let addtionalClassName = ''; - - if (column.isPrimary && store.isNested) { - addtionalClassName = 'Table-primayCell'; - prefix.push( - - ); - prefix.push( - item.expandable ? ( - - - - ) : ( - - ) - ); - } - - if ( - !ignoreDrag && - column.isPrimary && - store.isNested && - store.draggable && - item.draggable - ) { - affix.push( - - - - ); - } - - const canAccessSuperData = - column.pristine.canAccessSuperData ?? this.props.canAccessSuperData; - const subProps: any = { - ...props, - // 操作列不下发loading，否则会导致操作栏里面的所有按钮都出现loading - loading: column.type === 'operation' ? false : props.loading, - btnDisabled: store.dragging, - data: item.locals, - value: column.name - ? resolveVariable( - column.name, - canAccessSuperData ? item.locals : item.data - ) - : column.value, - popOverContainer: this.getPopOverContainer, - rowSpan: item.rowSpans[column.name as string], - quickEditFormRef: this.subFormRef, - cellPrefix: prefix, - cellAffix: affix, - onImageEnlarge: this.handleImageEnlarge, - canAccessSuperData, - row: item, - itemBadge, - showBadge: - !props.isHead && - itemBadge && - store.firstToggledColumnIndex === props.colIndex, - onQuery: undefined, - style, - className: cx( - column.pristine.className, - stickyClassName, - addtionalClassName - ), - /** 给子节点的设置默认值，避免取到env.affixHeader的默认值，导致表头覆盖首行 */ - affixOffsetTop: 0 - }; - delete subProps.label; - - return render( - region, - { - ...column.pristine, - column: column.pristine, - type: 'cell' - }, - subProps + return ( + ); } @@ -2857,13 +2713,6 @@ export default class Table extends React.Component { onMouseLeave={this.handleMouseLeave} > {this.renderTableContent()} - - { - // 利用这个将 table-layout: auto 转成 table-layout: fixed - store.columnWidthReady ? null : ( - - ) - }
{footer}