Skip to content

fix:表格只有一列时，该列固定，并且给scroll.x设置值，表格出现横向滚动条，并且出现右侧出现空白 #36330 #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 15, 2022
Merged

fix:表格只有一列时，该列固定，并且给scroll.x设置值，表格出现横向滚动条，并且出现右侧出现空白 #36330 #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f59918a
修复表格组件开启scrollX时全部列左固定时出现横向滚动条
Jul 14, 2022
07e8fc5
修复表格在所有列全是左固定的时候，会出现横向滚动条的情况
Jul 14, 2022
df6222c
提交测试用例
Jul 14, 2022
44fd2eb
fix:修改表格全部左固定时的样式名称
dashaowang Jul 14, 2022
2569a96
fix:更新所有的表格列左固定的测试用例
Jul 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@
pointer-events: none;
}

&-fix-left-all::after {
display: none;
}

&-fix-right-first,
&-fix-right-last {
box-shadow: -1px 0 0 @border-color;
Expand Down
4 changes: 4 additions & 0 deletions src/Cell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {
import { getPathValue, validateValue } from '../utils/valueUtil';
import StickyContext from '../context/StickyContext';
import HoverContext from '../context/HoverContext';
import BodyContext from '../context/BodyContext';
import type { HoverContextProps } from '../context/HoverContext';
import warning from 'rc-util/lib/warning';
import PerfContext from '../context/PerfContext';
Expand Down Expand Up @@ -67,6 +68,7 @@ interface InternalCellProps<RecordType extends DefaultRecordType>
lastFixLeft?: boolean;
firstFixRight?: boolean;
lastFixRight?: boolean;
allColsFixedLeft?: boolean;

// ====================== Private Props ======================
/** @private Used for `expandable` with nest tree */
Expand Down Expand Up @@ -141,6 +143,7 @@ function Cell<RecordType extends DefaultRecordType>(

const perfRecord = React.useContext(PerfContext);
const supportSticky = React.useContext(StickyContext);
const { allColumnsFixedLeft } = React.useContext(BodyContext);
Copy link
Member

@afc163 afc163 Jul 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

逻辑上改成 allColumnsFixed 如何，这样还能支持都是右固定的情况。

Copy link
Contributor Author

@dashaowang dashaowang Jul 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

大佬你好 ，我目前看到的现象是对于属性lastFixRight，计算条件只有direction === 'rtl'，并且当前列的下一列不为fixed='right'时才是true。所以对于全部右固定的情况，计算出的lastFixRight也是false。其实不会有问题的。
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

allColumnsFixedLeft 在结果上是不是等于 firstFixLeft && lastFixLeft

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
实际的测试结果上不是的


// ==================== Child Node ====================
const [childNode, legacyCellProps] = React.useMemo<
Expand Down Expand Up @@ -280,6 +283,7 @@ function Cell<RecordType extends DefaultRecordType>(
[`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky,
[`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky,
[`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky,
[`${cellPrefixCls}-fix-left-all`]: lastFixLeft && allColumnsFixedLeft && supportSticky,
[`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky,
[`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
[`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
Expand Down
1 change: 1 addition & 0 deletions src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -822,6 +822,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
onTriggerExpand,
expandIconColumnIndex,
indentSize,
allColumnsFixedLeft: columnContext.flattenColumns.every(col => col.fixed === 'left'),
}),
[
columnContext,
Expand Down
1 change: 1 addition & 0 deletions src/context/BodyContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface BodyContextProps<RecordType = DefaultRecordType> {
expandIcon: RenderExpandIcon<RecordType>;
onTriggerExpand: TriggerEventHandler<RecordType>;
expandIconColumnIndex: number;
allColumnsFixedLeft: boolean;
}

const BodyContext = React.createContext<BodyContextProps>(null);
Expand Down
5 changes: 5 additions & 0 deletions tests/FixedColumn.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,4 +272,9 @@ describe('Table.FixedColumn', () => {
wrapper.update();
expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(4);
});

it('when all columns fixed left,cell should has classname rc-table-cell-fix-left-all', () => {
const wrapper = mount(<Table columns={columns.slice(0, 2)} data={data} scroll={{ x: 1000 }} />);
expect(wrapper.find('.rc-table-cell-fix-left-all')).toHaveLength(10);
});
});