diff --git a/src/_common b/src/_common index 47eeb106c..8179b8d2e 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 47eeb106c00b813a6808698ae876559eb394cf85 +Subproject commit 8179b8d2e12a34e55c4e9ee0ce4170f842eacf1f diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx index 4a644d3a4..b97a20fb8 100644 --- a/src/table/BaseTable.tsx +++ b/src/table/BaseTable.tsx @@ -139,6 +139,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => { tableHtmlElement: tableElmRef.current, tableContentElement: tableContentRef.current, affixHeaderElement: affixHeaderRef.current, + refreshTable, })); const onFixedChange = () => { @@ -219,11 +220,11 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => { marginTop: onlyVirtualScrollBordered ? `${borderWidth}px` : 0, }; // 多级表头左边线缺失 - const affixedMultipleHeaderLeftBorder = props.bordered && isMultipleHeader ? 1 : 0; + const affixedLeftBorder = props.bordered ? 1 : 0; const affixedHeader = Boolean(props.headerAffixedTop && tableWidth) && (
@@ -269,7 +270,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => { >
{ validateRowData, validateTableData, clearValidateData, + ...primaryTableRef.current, })); // 1. 影响列数量的因素有:自定义列配置、展开/收起行、多级表头;2. 影响表头内容的因素有:排序图标、筛选图标 diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts index c9666e3c5..eb94796a0 100644 --- a/src/table/hooks/useFixed.ts +++ b/src/table/hooks/useFixed.ts @@ -1,5 +1,6 @@ import { useEffect, useState, useMemo, useRef, WheelEvent } from 'react'; import get from 'lodash/get'; +import debounce from 'lodash/debounce'; import log from '../../_common/js/log'; import { ClassName, Styles } from '../../common'; import { BaseTableCol, TableRowData, TdBaseTableProps } from '../type'; @@ -295,11 +296,11 @@ export default function useFixed(props: TdBaseTableProps, finalColumns: BaseTabl }; let shadowLastScrollLeft: number; - const updateColumnFixedShadow = (target: HTMLElement) => { + const updateColumnFixedShadow = (target: HTMLElement, extra?: { skipScrollLimit?: boolean }) => { if (!isFixedColumn || !target) return; const { scrollLeft } = target; // 只有左右滚动,需要更新固定列阴影 - if (shadowLastScrollLeft === scrollLeft) return; + if (shadowLastScrollLeft === scrollLeft && (!extra || !extra.skipScrollLimit)) return; shadowLastScrollLeft = scrollLeft; const isShowRight = target.clientWidth + scrollLeft < target.scrollWidth; setShowColumnShadow({ @@ -465,15 +466,15 @@ export default function useFixed(props: TdBaseTableProps, finalColumns: BaseTabl ], ); - const refreshTable = () => { + const refreshTable = debounce(() => { updateTableWidth(); updateFixedHeader(); updateThWidthListHandler(); if (isFixedColumn || isFixedHeader) { updateFixedStatus(); - updateColumnFixedShadow(tableContentRef.current); + updateColumnFixedShadow(tableContentRef.current, { skipScrollLimit: true }); } - }; + }, 30); const onResize = refreshTable; @@ -491,18 +492,17 @@ export default function useFixed(props: TdBaseTableProps, finalColumns: BaseTabl if (columnResizable && recalculateColWidth.current) { recalculateColWidth.current(finalColumns, thWidthList, tableLayout, tableElmWidth); } + const isWatchResize = isFixedColumn || isFixedHeader || !notNeedThWidthList || !data.length; + if (isWatchResize) { + on(window, 'resize', onResize); + } clearTimeout(timer); }); - if (isFixedColumn || isFixedHeader || !notNeedThWidthList) { - on(window, 'resize', onResize); - } return () => { - if (isFixedColumn || isFixedHeader || !notNeedThWidthList) { - off(window, 'resize', onResize); - } + off(window, 'resize', onResize); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isFixedColumn]); return { tableWidth,