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: 兼容IE滚动条高度计算覆盖不全问题 #1171

Merged
merged 5 commits into from
Jul 14, 2022
Merged

fix: 兼容IE滚动条高度计算覆盖不全问题 #1171

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e12846
fix: 兼容IE滚动条高度计算覆盖不全问题
brianzhang Jul 13, 2022
d1bf6df
fix: 'fix: 更新吸顶高度设置IE判断
brianzhang Jul 14, 2022
290c2b2
fix: fix: 申明IEHeaderWrap变量
brianzhang Jul 14, 2022
513b277
feat: fix: 更改affixHeaderWrapHeightStyle height值设置去掉IE判断
brianzhang Jul 14, 2022
8e42d39
feat: feat: affixHeaderHeight 添加兼容计算，抽取计算变量
brianzhang Jul 14, 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
6 changes: 5 additions & 1 deletion src/table/base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { ROW_LISTENERS } from './tr';
import THead from './thead';
import TFoot from './tfoot';
import log from '../_common/js/log';
import { getIEVersion } from '../_common/js/utils/helper';
import { getAffixProps } from './utils';

export const BASE_TABLE_EVENTS = ['page-change', 'cell-click', 'scroll', 'scrollX', 'scrollY'];
Expand Down Expand Up @@ -303,7 +304,10 @@ export default defineComponent({
const onlyVirtualScrollBordered = !!(this.isVirtual && !this.headerAffixedTop && this.bordered) && /Chrome/.test(navigator?.userAgent);
const borderWidth = this.bordered && onlyVirtualScrollBordered ? 1 : 0;
const barWidth = this.isWidthOverflow ? this.scrollbarWidth : 0;
const affixHeaderWrapHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - barWidth - borderWidth;
// IE浏览器需要遮挡header吸顶滚动条，要减去getBoundingClientRect.height的滚动条高度4像素
const IEHeaderWrap = getIEVersion() <= 11 ? 4 : 0;
const affixHeaderHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
const affixHeaderWrapHeight = affixHeaderHeight - barWidth - borderWidth;
// 两类场景：1. 虚拟滚动，永久显示表头，直到表头消失在可视区域； 2. 表头吸顶，根据滚动情况判断是否显示吸顶表头
const headerOpacity = props.headerAffixedTop ? Number(this.showAffixHeader) : 1;
const affixHeaderWrapHeightStyle = {
Expand Down