mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 12:58:38 +08:00
修复 Table 在表头有分组的情况下,固定列样式有些问题
This commit is contained in:
parent
d40074ca7f
commit
cc203adb89
@ -140,7 +140,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
'popOverContainer',
|
'popOverContainer',
|
||||||
'headerToolbarClassName',
|
'headerToolbarClassName',
|
||||||
'toolbarClassName',
|
'toolbarClassName',
|
||||||
'footerToolbarClassName',
|
'footerToolbarClassName'
|
||||||
];
|
];
|
||||||
static defaultProps: Partial<TableProps> = {
|
static defaultProps: Partial<TableProps> = {
|
||||||
className: '',
|
className: '',
|
||||||
@ -279,9 +279,9 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
let parent: HTMLElement | Window | null = getScrollParent(findDOMNode(
|
let parent: HTMLElement | Window | null = getScrollParent(
|
||||||
this
|
findDOMNode(this) as HTMLElement
|
||||||
) as HTMLElement);
|
);
|
||||||
|
|
||||||
if (!parent || parent === document.body) {
|
if (!parent || parent === document.body) {
|
||||||
parent = window;
|
parent = window;
|
||||||
@ -404,7 +404,11 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
saveImmediately?: boolean | any,
|
saveImmediately?: boolean | any,
|
||||||
savePristine?: boolean
|
savePristine?: boolean
|
||||||
) {
|
) {
|
||||||
const {onSave, saveImmediately: propsSaveImmediately, primaryField} = this.props;
|
const {
|
||||||
|
onSave,
|
||||||
|
saveImmediately: propsSaveImmediately,
|
||||||
|
primaryField
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
item.change(values, savePristine);
|
item.change(values, savePristine);
|
||||||
|
|
||||||
@ -542,7 +546,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
const dom = findDOMNode(this) as HTMLElement;
|
const dom = findDOMNode(this) as HTMLElement;
|
||||||
const clip = (this.table as HTMLElement).getBoundingClientRect();
|
const clip = (this.table as HTMLElement).getBoundingClientRect();
|
||||||
const offsetY =
|
const offsetY =
|
||||||
this.props.affixOffsetTop ?? this.props.env.affixOffsetTop ?? 0;
|
this.props.affixOffsetTop || this.props.env.affixOffsetTop || 0;
|
||||||
const affixed = clip.top < offsetY && clip.top + clip.height - 40 > offsetY;
|
const affixed = clip.top < offsetY && clip.top + clip.height - 40 > offsetY;
|
||||||
const affixedDom = dom.querySelector(`.${ns}Table-fixedTop`) as HTMLElement;
|
const affixedDom = dom.querySelector(`.${ns}Table-fixedTop`) as HTMLElement;
|
||||||
|
|
||||||
@ -761,7 +765,11 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
'tr[data-index]'
|
'tr[data-index]'
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
|
|
||||||
if (!tr || !this.props.itemActions) {
|
if (
|
||||||
|
!tr ||
|
||||||
|
!this.props.itemActions ||
|
||||||
|
!this.props.itemActions.filter(item => !item.hiddenOnHover).length
|
||||||
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -963,9 +971,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
<div className={cx('Table-heading', headingClassName)} key="heading">
|
<div className={cx('Table-heading', headingClassName)} key="heading">
|
||||||
{!saveImmediately && store.modified && !hideQuickSaveBtn ? (
|
{!saveImmediately && store.modified && !hideQuickSaveBtn ? (
|
||||||
<span>
|
<span>
|
||||||
{`当前有 ${
|
{`当前有 ${store.modified} 条记录修改了内容, 但并没有提交。请选择:`}
|
||||||
store.modified
|
|
||||||
} 条记录修改了内容, 但并没有提交。请选择:`}
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={cx('Button Button--xs Button--success m-l-sm')}
|
className={cx('Button Button--xs Button--success m-l-sm')}
|
||||||
@ -1037,7 +1043,9 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
checked={store.someChecked}
|
checked={store.someChecked}
|
||||||
onChange={this.handleCheckAll}
|
onChange={this.handleCheckAll}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : (
|
||||||
|
'\u00A0'
|
||||||
|
)}
|
||||||
</th>
|
</th>
|
||||||
);
|
);
|
||||||
} else if (column.type === '__dragme') {
|
} else if (column.type === '__dragme') {
|
||||||
@ -1373,11 +1381,19 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
<thead>
|
<thead>
|
||||||
{store.columnGroup.length ? (
|
{store.columnGroup.length ? (
|
||||||
<tr>
|
<tr>
|
||||||
{store.columnGroup.map((item, index) => (
|
{store.columnGroup.map((item, index) => {
|
||||||
<th key={index} data-index={item.index} colSpan={item.colSpan}>
|
const renderColumns = columns.filter(a => ~item.has.indexOf(a));
|
||||||
{item.label ? render('tpl', item.label) : null}
|
|
||||||
</th>
|
return renderColumns.length ? (
|
||||||
))}
|
<th
|
||||||
|
key={index}
|
||||||
|
data-index={item.index}
|
||||||
|
colSpan={renderColumns.length}
|
||||||
|
>
|
||||||
|
{'\u00A0'}
|
||||||
|
</th>
|
||||||
|
) : null;
|
||||||
|
})}
|
||||||
</tr>
|
</tr>
|
||||||
) : null}
|
) : null}
|
||||||
<tr>
|
<tr>
|
||||||
@ -1609,7 +1625,11 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
const toolbarNode =
|
const toolbarNode =
|
||||||
actions || child || store.dragging ? (
|
actions || child || store.dragging ? (
|
||||||
<div
|
<div
|
||||||
className={cx('Table-toolbar Table-headToolbar', toolbarClassName, headerToolbarClassName)}
|
className={cx(
|
||||||
|
'Table-toolbar Table-headToolbar',
|
||||||
|
toolbarClassName,
|
||||||
|
headerToolbarClassName
|
||||||
|
)}
|
||||||
key="header-toolbar"
|
key="header-toolbar"
|
||||||
>
|
>
|
||||||
{actions}
|
{actions}
|
||||||
@ -1669,7 +1689,11 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
const toolbarNode =
|
const toolbarNode =
|
||||||
actions || child ? (
|
actions || child ? (
|
||||||
<div
|
<div
|
||||||
className={cx('Table-toolbar Table-footToolbar', toolbarClassName, footerToolbarClassName)}
|
className={cx(
|
||||||
|
'Table-toolbar Table-footToolbar',
|
||||||
|
toolbarClassName,
|
||||||
|
footerToolbarClassName
|
||||||
|
)}
|
||||||
key="footer-toolbar"
|
key="footer-toolbar"
|
||||||
>
|
>
|
||||||
{actions}
|
{actions}
|
||||||
@ -1771,9 +1795,12 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
|
|
||||||
renderItemActions() {
|
renderItemActions() {
|
||||||
const {itemActions, render, store, classnames: cx} = this.props;
|
const {itemActions, render, store, classnames: cx} = this.props;
|
||||||
|
const finnalActions = Array.isArray(itemActions)
|
||||||
|
? itemActions.filter(action => !action.hiddenOnHover)
|
||||||
|
: [];
|
||||||
|
|
||||||
const rowIndex = store.hoverIndex;
|
const rowIndex = store.hoverIndex;
|
||||||
if (!~rowIndex || !itemActions || !itemActions.length) {
|
if (!~rowIndex || !finnalActions.length) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1798,22 +1825,20 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={cx('Table-itemActions')}>
|
<div className={cx('Table-itemActions')}>
|
||||||
{itemActions.map((action, index) =>
|
{finnalActions.map((action, index) =>
|
||||||
action.hiddenOnHover
|
render(
|
||||||
? null
|
`itemAction/${index}`,
|
||||||
: render(
|
{
|
||||||
`itemAction/${index}`,
|
...(action as any),
|
||||||
{
|
isMenuItem: true
|
||||||
...(action as any),
|
},
|
||||||
isMenuItem: true
|
{
|
||||||
},
|
key: index,
|
||||||
{
|
item: store.rows[rowIndex],
|
||||||
key: index,
|
data: store.rows[rowIndex].locals,
|
||||||
item: store.rows[rowIndex],
|
rowIndex
|
||||||
data: store.rows[rowIndex].locals,
|
}
|
||||||
rowIndex
|
)
|
||||||
}
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user