Merge pull request #1284 from ZTao-z/fix/table

fix(table): 列宽度和小于表宽的情况下，调整列宽的结果与预期不符
Tencent · Aug 14, 2022 · 8d34b7a · 8d34b7a
2 parents 92510a5 + b25938c
commit 8d34b7a
Show file tree

Hide file tree

Showing 8 changed files with 301 additions and 52 deletions.
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
@@ -16,6 +16,7 @@ import { BaseTableProps } from './interface';
 import useStyle, { formatCSSUnit } from './hooks/useStyle';
 import useClassName from './hooks/useClassName';
 import { getAffixProps } from './utils';
+import log from '../_common/js/log';
 
 import { StyledProps, Styles } from '../common';
 
@@ -29,14 +30,19 @@ export interface TableListeners {
 export interface TBaseTableProps extends BaseTableProps, StyledProps {}
 
 const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
-  const { tableLayout, height, data, columns, style, headerAffixedTop, bordered } = props;
+  const { tableLayout, height, data, columns, style, headerAffixedTop, bordered, resizable } = props;
   const tableRef = useRef<HTMLDivElement>();
   const tableElmRef = useRef<HTMLTableElement>();
   const [tableFootHeight, setTableFootHeight] = useState(0);
   const { virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses } = useClassName();
   // 表格基础样式类
   const { tableClasses, tableContentStyles, tableElementStyles } = useStyle(props);
   // const [global] = useLocaleReceiver('table');
+  const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
+  const finalColumns = useMemo(
+    () => spansAndLeafNodes?.leafColumns || columns,
+    [spansAndLeafNodes?.leafColumns, columns],
+  );
 
   // 固定表头和固定列逻辑
   const {
@@ -55,7 +61,10 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     emitScrollEvent,
     setUseFixedTableElmRef,
     updateColumnFixedShadow,
-  } = useFixed(props);
+    getThWidthList,
+    updateThWidthList,
+    setRecalculateColWidthFuncRef,
+  } = useFixed(props, finalColumns);
 
   // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
   const {
@@ -71,12 +80,12 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     updateAffixHeaderOrFooter,
   } = useAffix(props);
 
-  const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
   const { dataSource, isPaginateData, renderPagination } = usePagination(props);
 
   // 列宽拖拽逻辑
-  const columnResizeParams = useColumnResize(tableContentRef, refreshTable);
-  const { resizeLineRef, resizeLineStyle } = columnResizeParams;
+  const columnResizeParams = useColumnResize(tableContentRef, refreshTable, getThWidthList, updateThWidthList);
+  const { resizeLineRef, resizeLineStyle, recalculateColWidth } = columnResizeParams;
+  setRecalculateColWidthFuncRef(recalculateColWidth);
 
   const dynamicBaseTableClasses = classNames(
     tableClasses.concat({
@@ -175,11 +184,15 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
 
   const newData = isPaginateData ? dataSource : data;
 
+  if (resizable && tableLayout === 'auto') {
+    log.warn('Table', 'table-layout can not be `auto` for resizable column table, set `table-layout: fixed` please.');
+  }
+
   const defaultColWidth = props.tableLayout === 'fixed' && isWidthOverflow ? '100px' : undefined;
   const colgroup = (
     <colgroup>
-      {(spansAndLeafNodes?.leafColumns || columns).map((col) => {
-        const style: Styles = { width: formatCSSUnit(col.width) || defaultColWidth };
+      {finalColumns.map((col) => {
+        const style: Styles = { width: formatCSSUnit(thWidthList[col.colKey] || col.width) || defaultColWidth };
         if (col.minWidth) {
           style.minWidth = formatCSSUnit(col.minWidth);
         }
@@ -329,6 +342,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
           bordered={props.bordered}
           spansAndLeafNodes={spansAndLeafNodes}
           thList={thList}
+          thWidthList={thWidthList}
           resizable={props.resizable}
           columnResizeParams={columnResizeParams}
         />

diff --git a/src/table/THead.tsx b/src/table/THead.tsx
@@ -28,8 +28,8 @@ export interface TheadProps {
   columnResizeParams?: {
     resizeLineRef: MutableRefObject<HTMLDivElement>;
     resizeLineStyle: CSSProperties;
-    onColumnMouseover: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;
-    onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;
+    onColumnMouseover: (e: MouseEvent) => void;
+    onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>, nearCol: BaseTableCol<TableRowData>) => void;
   };
 }
 
@@ -85,8 +85,13 @@ export default function THead(props: TheadProps) {
         if (!col.colKey) return null;
         const resizeColumnListener = props.resizable
           ? {
-              onMouseDown: (e) => columnResizeParams?.onColumnMousedown?.(e, col),
-              onMouseMove: (e) => columnResizeParams?.onColumnMouseover?.(e, col),
+              onMouseDown: (e) =>
+                columnResizeParams?.onColumnMousedown?.(
+                  e,
+                  col,
+                  index < row.length - 1 ? row[index + 1] : row[index - 1],
+                ),
+              onMouseMove: (e) => columnResizeParams?.onColumnMouseover?.(e),
             }
           : {};
         const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle({ col, colIndex: index }) : undefined;