修复 Nested Table 列固定显示问题
This commit is contained in:
parent
aef41bace7
commit
286f4836fa
|
@ -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 {
|
||||
render,
|
||||
store,
|
||||
|
@ -1255,6 +1261,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
let prefix: React.ReactNode = null;
|
||||
|
||||
if (
|
||||
!ignoreDrag &&
|
||||
column.isPrimary &&
|
||||
store.isNested &&
|
||||
store.draggable &&
|
||||
|
@ -1305,6 +1312,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
<div className={cx('Table-fixedLeft')}>
|
||||
{store.leftFixedColumns.length
|
||||
? this.renderFixedColumns(
|
||||
store.rows,
|
||||
store.leftFixedColumns,
|
||||
true,
|
||||
tableClassName
|
||||
|
@ -1314,6 +1322,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
<div className={cx('Table-fixedRight')}>
|
||||
{store.rightFixedColumns.length
|
||||
? this.renderFixedColumns(
|
||||
store.rows,
|
||||
store.rightFixedColumns,
|
||||
true,
|
||||
tableClassName
|
||||
|
@ -1352,6 +1361,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
}
|
||||
|
||||
renderFixedColumns(
|
||||
rows: Array<any>,
|
||||
columns: Array<IColumn>,
|
||||
headerOnly: boolean = false,
|
||||
tableClassName: string = ''
|
||||
|
@ -1408,36 +1418,15 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
|
||||
{headerOnly ? null : (
|
||||
<tbody>
|
||||
{store.rows.length ? (
|
||||
store.rows.map((item, rowIndex) => {
|
||||
const itemProps = buildItemProps
|
||||
? buildItemProps(item, rowIndex)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
{...itemProps}
|
||||
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
|
||||
}
|
||||
/>
|
||||
);
|
||||
{rows.length ? (
|
||||
this.renderRows(rows, columns, {
|
||||
regionPrefix: 'fixed/',
|
||||
renderCell: (
|
||||
region: string,
|
||||
column: IColumn,
|
||||
item: IRow,
|
||||
props: any
|
||||
) => this.renderCell(region, column, item, props, true)
|
||||
})
|
||||
) : (
|
||||
<tr className={cx('Table-placeholder')}>
|
||||
|
@ -1713,7 +1702,11 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
: footerNode || toolbarNode || null;
|
||||
}
|
||||
|
||||
renderRows(rows: Array<any>): any {
|
||||
renderRows(
|
||||
rows: Array<any>,
|
||||
columns = this.props.store.filteredColumns,
|
||||
rowProps: any = {}
|
||||
): any {
|
||||
const {
|
||||
store,
|
||||
rowClassName,
|
||||
|
@ -1747,13 +1740,14 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
'is-expandable': item.expandable
|
||||
}
|
||||
)}
|
||||
columns={store.filteredColumns}
|
||||
columns={columns}
|
||||
renderCell={this.renderCell}
|
||||
render={render}
|
||||
onAction={onAction}
|
||||
onCheck={this.handleCheck}
|
||||
// todo 先注释 quickEditEnabled={item.depth === 1}
|
||||
onQuickChange={store.dragging ? null : this.handleQuickChange}
|
||||
{...rowProps}
|
||||
/>
|
||||
];
|
||||
|
||||
|
@ -1773,7 +1767,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
? filter(rowClassNameExpr, item.data)
|
||||
: rowClassName
|
||||
)}
|
||||
columns={store.footableColumns}
|
||||
columns={columns}
|
||||
renderCell={this.renderCell}
|
||||
render={render}
|
||||
onAction={onAction}
|
||||
|
@ -1781,12 +1775,13 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
footableMode
|
||||
footableColSpan={store.filteredColumns.length}
|
||||
onQuickChange={store.dragging ? null : this.handleQuickChange}
|
||||
{...rowProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (Array.isArray(item.data.children)) {
|
||||
// 嵌套表格
|
||||
doms.push(...this.renderRows(item.children));
|
||||
doms.push(...this.renderRows(item.children, columns, rowProps));
|
||||
}
|
||||
}
|
||||
return doms;
|
||||
|
@ -1886,7 +1881,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
</thead>
|
||||
<tbody>
|
||||
{store.rows.length ? (
|
||||
this.renderRows(store.rows)
|
||||
this.renderRows(store.rows, store.filteredColumns)
|
||||
) : (
|
||||
<tr className={cx('Table-placeholder')}>
|
||||
<td colSpan={store.filteredColumns.length}>
|
||||
|
@ -1936,6 +1931,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
<div className={cx('Table-fixedLeft')}>
|
||||
{affixColumns !== false && store.leftFixedColumns.length
|
||||
? this.renderFixedColumns(
|
||||
store.rows,
|
||||
store.leftFixedColumns,
|
||||
false,
|
||||
tableClassName
|
||||
|
@ -1945,6 +1941,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||
<div className={cx('Table-fixedRight')}>
|
||||
{affixColumns !== false && store.rightFixedColumns.length
|
||||
? this.renderFixedColumns(
|
||||
store.rows,
|
||||
store.rightFixedColumns,
|
||||
false,
|
||||
tableClassName
|
||||
|
|
|
@ -245,7 +245,16 @@ export const TableStore = iRendererStore
|
|||
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() {
|
||||
|
@ -513,14 +522,13 @@ export const TableStore = iRendererStore
|
|||
columns.unshift({
|
||||
type: '__expandme',
|
||||
toggable: false,
|
||||
// fixed: 'left',
|
||||
className: 'Table-expandCell'
|
||||
});
|
||||
|
||||
columns.unshift({
|
||||
type: '__checkme',
|
||||
toggable: false,
|
||||
fixed: 'left',
|
||||
toggable: false,
|
||||
className: 'Table-checkCell'
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue