修复 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 {
|
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
|
||||||
|
|
|
@ -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'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue