Skip to content
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

fix(table): 修复由于表头左边线缺失减少1像素后导致在IE上affix表头和表尾出现滚动条问题 #2216

Merged
merged 1 commit into from
Mar 8, 2023
Merged

fix(table): 修复由于表头左边线缺失减少1像素后导致在IE上affix表头和表尾出现滚动条问题 #2216

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 8 additions & 7 deletions src/table/base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export default defineComponent({
const { global } = useConfig('table');
const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader(props);
const finalColumns = computed(() => spansAndLeafNodes.value?.leafColumns || props.columns);
const isIE = computed(() => getIEVersion() <= 11);

// 吸附相关ref 用来做视图resize后重新定位
const paginationAffixRef = ref();
Expand Down Expand Up @@ -306,6 +307,7 @@ export default defineComponent({
horizontalScrollAffixRef,
headerTopAffixRef,
footerBottomAffixRef,
isIE,
};
},

Expand Down Expand Up @@ -360,13 +362,12 @@ export default defineComponent({
renderFixedHeader(columns: BaseTableCol<TableRowData>[]) {
if (!this.showHeader) return null;
const isVirtual = this.virtualConfig.isVirtualScroll.value;
const isIE = getIEVersion() <= 11;
const barWidth = this.isWidthOverflow ? this.scrollbarWidth : 0;
// IE 浏览器需要遮挡 header 吸顶滚动条，要减去 getBoundingClientRect.height 的滚动条高度 4 像素
const IEHeaderWrap = isIE ? 4 : 0;
const IEHeaderWrap = this.isIE ? 4 : 0;
const affixHeaderHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
// IE 浏览器不需要减去横向滚动条的宽度
const affixHeaderWrapHeight = affixHeaderHeight - (isIE ? 0 : barWidth);
const affixHeaderWrapHeight = affixHeaderHeight - (this.isIE ? 0 : barWidth);
// 两类场景：1. 虚拟滚动，永久显示表头，直到表头消失在可视区域； 2. 表头吸顶，根据滚动情况判断是否显示吸顶表头
const headerOpacity = this.headerAffixedTop ? Number(this.showAffixHeader) : 1;
const affixHeaderWrapHeightStyle = {
Expand All @@ -375,8 +376,8 @@ export default defineComponent({
opacity: headerOpacity,
};
const colgroup = this.renderColGroup(columns, true);
// 多级表头左边线缺失
const affixedLeftBorder = this.bordered ? 1 : 0;
// 多级表头左边线缺失，IE不需要
const affixedLeftBorder = this.bordered && !this.isIE ? 1 : 0;

const affixedHeader = Boolean((this.headerAffixedTop || isVirtual) && this.tableWidth) && (
<div
Expand Down Expand Up @@ -407,8 +408,8 @@ export default defineComponent({
*/
renderAffixedFooter(columns: BaseTableCol<TableRowData>[]) {
const barWidth = this.isWidthOverflow ? this.scrollbarWidth : 0;
// 多级表头左边线缺失
const affixedLeftBorder = this.bordered ? 1 : 0;
// 多级表头左边线缺失, IE不需要
const affixedLeftBorder = this.bordered && !this.isIE ? 1 : 0;
let marginScrollbarWidth = barWidth;
if (this.bordered) {
marginScrollbarWidth += 1;
Expand Down