diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx index 0fbdcee42..fcc18c62c 100644 --- a/src/table/base-table.tsx +++ b/src/table/base-table.tsx @@ -57,8 +57,6 @@ export default defineComponent({ const tableElmRef = ref(); const tableBodyRef = ref(); const tableFootHeight = ref(0); - const paginationAffixRef = ref(); - const horizontalScrollAffixRef = ref(); const { virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses, @@ -69,6 +67,12 @@ export default defineComponent({ const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader(props); const finalColumns = computed(() => spansAndLeafNodes.value?.leafColumns || props.columns); + // 吸附相关ref 用来做视图resize后重新定位 + const paginationAffixRef = ref(); + const horizontalScrollAffixRef = ref(); + const headerTopAffixRef = ref(); + const footerBottomAffixRef = ref(); + // 固定表头和固定列逻辑 const { scrollbarWidth, @@ -90,7 +94,12 @@ export default defineComponent({ updateThWidthList, setRecalculateColWidthFuncRef, addTableResizeObserver, - } = useFixed(props, context, finalColumns, paginationAffixRef, horizontalScrollAffixRef); + } = useFixed(props, context, finalColumns, { + paginationAffixRef, + horizontalScrollAffixRef, + headerTopAffixRef, + footerBottomAffixRef, + }); // 1. 表头吸顶;2. 表尾吸底;3. 底部滚动条吸底;4. 分页器吸底 const { @@ -315,6 +324,8 @@ export default defineComponent({ onInnerVirtualScroll, paginationAffixRef, horizontalScrollAffixRef, + headerTopAffixRef, + footerBottomAffixRef, }; }, @@ -415,6 +426,7 @@ export default defineComponent({ offsetBottom={marginScrollbarWidth || 0} props={getAffixProps(this.footerAffixedBottom, this.footerAffixProps)} style={{ marginTop: `${-1 * (this.tableFootHeight + marginScrollbarWidth)}px` }} + ref="footerBottomAffixRef" >
{this.renderFixedHeader(columns)} diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index 0f81a5d3f..31049a429 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -85,8 +85,7 @@ export default function useFixed( props: TdBaseTableProps, context: SetupContext, finalColumns: ComputedRef[]>, - paginationAffixRef: Ref, - horizontalScrollAffixRef: Ref, + affixRef: Record, ) { const { columns, @@ -381,8 +380,10 @@ export default function useFixed( const updateAffixPosition = () => { // 在表格高度变化的时候 需要手动调整affix的位置 因为affix本身无法监听到这些变化触发重新计算 - paginationAffixRef.value?.handleScroll?.(); - horizontalScrollAffixRef.value?.handleScroll?.(); + affixRef.paginationAffixRef.value?.handleScroll?.(); + affixRef.horizontalScrollAffixRef.value?.handleScroll?.(); + affixRef.headerTopAffixRef.value?.handleScroll?.(); + affixRef.footerBottomAffixRef.value?.handleScroll?.(); }; const updateThWidthList = (trList: HTMLCollection | { [colKey: string]: number }) => { diff --git a/src/upload/themes/style/css.js b/src/upload/themes/style/css.js new file mode 100644 index 000000000..f388879ac --- /dev/null +++ b/src/upload/themes/style/css.js @@ -0,0 +1 @@ +import '../../style/index.css'; diff --git a/src/upload/themes/style/index.js b/src/upload/themes/style/index.js new file mode 100644 index 000000000..4a2e7d583 --- /dev/null +++ b/src/upload/themes/style/index.js @@ -0,0 +1 @@ +import '../../style/index.js';