修复 Nested Table 列固定显示问题

This commit is contained in:
2betop 2020-05-28 12:10:00 +08:00
parent aef41bace7
commit 286f4836fa
2 changed files with 44 additions and 39 deletions

View File

@ -1189,7 +1189,13 @@ export default class Table extends React.Component<TableProps, object> {
); );
} }
renderCell(region: string, column: IColumn, item: IRow, props: any) { renderCell(
region: string,
column: IColumn,
item: IRow,
props: any,
ignoreDrag = false
) {
const { const {
render, render,
store, store,
@ -1255,6 +1261,7 @@ export default class Table extends React.Component<TableProps, object> {
let prefix: React.ReactNode = null; let prefix: React.ReactNode = null;
if ( if (
!ignoreDrag &&
column.isPrimary && column.isPrimary &&
store.isNested && store.isNested &&
store.draggable && store.draggable &&
@ -1305,6 +1312,7 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-fixedLeft')}> <div className={cx('Table-fixedLeft')}>
{store.leftFixedColumns.length {store.leftFixedColumns.length
? this.renderFixedColumns( ? this.renderFixedColumns(
store.rows,
store.leftFixedColumns, store.leftFixedColumns,
true, true,
tableClassName tableClassName
@ -1314,6 +1322,7 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-fixedRight')}> <div className={cx('Table-fixedRight')}>
{store.rightFixedColumns.length {store.rightFixedColumns.length
? this.renderFixedColumns( ? this.renderFixedColumns(
store.rows,
store.rightFixedColumns, store.rightFixedColumns,
true, true,
tableClassName tableClassName
@ -1352,6 +1361,7 @@ export default class Table extends React.Component<TableProps, object> {
} }
renderFixedColumns( renderFixedColumns(
rows: Array<any>,
columns: Array<IColumn>, columns: Array<IColumn>,
headerOnly: boolean = false, headerOnly: boolean = false,
tableClassName: string = '' tableClassName: string = ''
@ -1408,36 +1418,15 @@ export default class Table extends React.Component<TableProps, object> {
{headerOnly ? null : ( {headerOnly ? null : (
<tbody> <tbody>
{store.rows.length ? ( {rows.length ? (
store.rows.map((item, rowIndex) => { this.renderRows(rows, columns, {
const itemProps = buildItemProps regionPrefix: 'fixed/',
? buildItemProps(item, rowIndex) renderCell: (
: null; region: string,
column: IColumn,
return ( item: IRow,
<TableRow props: any
{...itemProps} ) => this.renderCell(region, column, item, props, true)
classPrefix={ns}
checkOnItemClick={checkOnItemClick}
key={item.id}
itemIndex={rowIndex}
item={item}
itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName
)}
columns={columns}
renderCell={this.renderCell}
render={render}
regionPrefix="fixed/"
onCheck={this.handleCheck}
onAction={onAction}
onQuickChange={
store.dragging ? null : this.handleQuickChange
}
/>
);
}) })
) : ( ) : (
<tr className={cx('Table-placeholder')}> <tr className={cx('Table-placeholder')}>
@ -1713,7 +1702,11 @@ export default class Table extends React.Component<TableProps, object> {
: footerNode || toolbarNode || null; : footerNode || toolbarNode || null;
} }
renderRows(rows: Array<any>): any { renderRows(
rows: Array<any>,
columns = this.props.store.filteredColumns,
rowProps: any = {}
): any {
const { const {
store, store,
rowClassName, rowClassName,
@ -1747,13 +1740,14 @@ export default class Table extends React.Component<TableProps, object> {
'is-expandable': item.expandable 'is-expandable': item.expandable
} }
)} )}
columns={store.filteredColumns} columns={columns}
renderCell={this.renderCell} renderCell={this.renderCell}
render={render} render={render}
onAction={onAction} onAction={onAction}
onCheck={this.handleCheck} onCheck={this.handleCheck}
// todo 先注释 quickEditEnabled={item.depth === 1} // todo 先注释 quickEditEnabled={item.depth === 1}
onQuickChange={store.dragging ? null : this.handleQuickChange} onQuickChange={store.dragging ? null : this.handleQuickChange}
{...rowProps}
/> />
]; ];
@ -1773,7 +1767,7 @@ export default class Table extends React.Component<TableProps, object> {
? filter(rowClassNameExpr, item.data) ? filter(rowClassNameExpr, item.data)
: rowClassName : rowClassName
)} )}
columns={store.footableColumns} columns={columns}
renderCell={this.renderCell} renderCell={this.renderCell}
render={render} render={render}
onAction={onAction} onAction={onAction}
@ -1781,12 +1775,13 @@ export default class Table extends React.Component<TableProps, object> {
footableMode footableMode
footableColSpan={store.filteredColumns.length} footableColSpan={store.filteredColumns.length}
onQuickChange={store.dragging ? null : this.handleQuickChange} onQuickChange={store.dragging ? null : this.handleQuickChange}
{...rowProps}
/> />
); );
} }
} else if (Array.isArray(item.data.children)) { } else if (Array.isArray(item.data.children)) {
// 嵌套表格 // 嵌套表格
doms.push(...this.renderRows(item.children)); doms.push(...this.renderRows(item.children, columns, rowProps));
} }
} }
return doms; return doms;
@ -1886,7 +1881,7 @@ export default class Table extends React.Component<TableProps, object> {
</thead> </thead>
<tbody> <tbody>
{store.rows.length ? ( {store.rows.length ? (
this.renderRows(store.rows) this.renderRows(store.rows, store.filteredColumns)
) : ( ) : (
<tr className={cx('Table-placeholder')}> <tr className={cx('Table-placeholder')}>
<td colSpan={store.filteredColumns.length}> <td colSpan={store.filteredColumns.length}>
@ -1936,6 +1931,7 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-fixedLeft')}> <div className={cx('Table-fixedLeft')}>
{affixColumns !== false && store.leftFixedColumns.length {affixColumns !== false && store.leftFixedColumns.length
? this.renderFixedColumns( ? this.renderFixedColumns(
store.rows,
store.leftFixedColumns, store.leftFixedColumns,
false, false,
tableClassName tableClassName
@ -1945,6 +1941,7 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-fixedRight')}> <div className={cx('Table-fixedRight')}>
{affixColumns !== false && store.rightFixedColumns.length {affixColumns !== false && store.rightFixedColumns.length
? this.renderFixedColumns( ? this.renderFixedColumns(
store.rows,
store.rightFixedColumns, store.rightFixedColumns,
false, false,
tableClassName tableClassName

View File

@ -245,7 +245,16 @@ export const TableStore = iRendererStore
return []; return [];
} }
return getFilteredColumns().filter(item => item.fixed === 'left'); let columns = getFilteredColumns().filter(item => item.fixed === 'left');
// 有才带过去,没有就不带了
if (columns.length) {
columns = getFilteredColumns().filter(
item => item.fixed === 'left' || /^__/.test(item.type)
);
}
return columns;
} }
function getRightFixedColumns() { function getRightFixedColumns() {
@ -513,14 +522,13 @@ export const TableStore = iRendererStore
columns.unshift({ columns.unshift({
type: '__expandme', type: '__expandme',
toggable: false, toggable: false,
// fixed: 'left',
className: 'Table-expandCell' className: 'Table-expandCell'
}); });
columns.unshift({ columns.unshift({
type: '__checkme', type: '__checkme',
toggable: false,
fixed: 'left', fixed: 'left',
toggable: false,
className: 'Table-checkCell' className: 'Table-checkCell'
}); });