Skip to content

Commit

Permalink
fix(table): 修正动态列变化时,表头的宽度和高度更新问题 (#3557)
Browse files Browse the repository at this point in the history
* fix: 🐛 修正计算总列宽时,重复叠加计算子表头宽度的问题

* fix(table): 在提供列配置选项时,默认只提供叶子列作为配置选项,作为最细粒度配置的方式

* fix(table): 修正动态列变化时,表头的宽度和高度更新问题

* fix(table): 修正错误的 ref 用法
  • Loading branch information
Cat1007 authored Nov 3, 2023
1 parent eb3e49f commit 353d5fa
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 9 deletions.
23 changes: 15 additions & 8 deletions src/table/base-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -477,15 +477,22 @@ export default defineComponent({
// IE 浏览器需要遮挡 header 吸顶滚动条,要减去 getBoundingClientRect.height 的滚动条高度 4 像素
const IEHeaderWrap = getIEVersion() <= 11 ? 4 : 0;
const barWidth = this.isWidthOverflow ? this.scrollbarWidth : 0;
const affixHeaderHeight = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
const affixHeaderWrapHeight = affixHeaderHeight - barWidth;
const affixHeaderHeight = ref((this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap);
// 等待表头渲染完成后再更新高度,有可能列变动带来多级表头的高度变化,错误高度会导致滚动条显示
const timer = setTimeout(() => {
affixHeaderHeight.value = (this.affixHeaderRef?.getBoundingClientRect().height || 0) - IEHeaderWrap;
clearTimeout(timer);
}, 0);
const affixHeaderWrapHeight = computed(() => affixHeaderHeight.value - barWidth);
// 两类场景:1. 虚拟滚动,永久显示表头,直到表头消失在可视区域; 2. 表头吸顶,根据滚动情况判断是否显示吸顶表头
const headerOpacity = props.headerAffixedTop ? Number(this.showAffixHeader) : 1;
const affixHeaderWrapHeightStyle = {
width: `${this.tableWidth}px`,
height: `${affixHeaderWrapHeight}px`,
opacity: headerOpacity,
};
const affixHeaderWrapHeightStyle = computed(() => {
return {
width: `${this.tableWidth}px`,
height: `${affixHeaderWrapHeight.value}px`,
opacity: headerOpacity,
};
});
// 多级表头左边线缺失
const affixedLeftBorder = this.bordered ? 1 : 0;
const affixedHeader = Boolean(
Expand Down Expand Up @@ -514,7 +521,7 @@ export default defineComponent({
// 添加这一层,是为了隐藏表头的横向滚动条。如果以后不需要照顾 IE 10 以下的项目,则可直接移除这一层
// 彼时,可更为使用 CSS 样式中的 .hideScrollbar()
const affixHeaderWithWrap = (
<div class={this.tableBaseClass.affixedHeaderWrap} style={affixHeaderWrapHeightStyle}>
<div class={this.tableBaseClass.affixedHeaderWrap} style={affixHeaderWrapHeightStyle.value}>
{affixedHeader}
</div>
);
Expand Down
5 changes: 4 additions & 1 deletion src/table/hooks/useFixed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,10 @@ export default function useFixed(
});
const rootThWidthList = pick(thWidthList, preColKeys);
const oldTotalWidth = Object.values(rootThWidthList).reduce((r = 0, n) => r + n);
setTableElmWidth(oldTotalWidth - reduceWidth);
// 保留原有可能编辑过的列宽度,但是当剩余列过小时,表头小于内容宽,需要缩放回内容宽度
const contentWidth = tableElmRef.value.getBoundingClientRect().width;
const widthToReserve = oldTotalWidth - reduceWidth;
setTableElmWidth(Math.max(contentWidth, widthToReserve));
}
});

Expand Down

0 comments on commit 353d5fa

Please sign in to comment.