fix(table): 修复合并单元格中borderLeft不显示

Tencent · Dec 14, 2021 · 69da5ee · 69da5ee
1 parent d057839
commit 69da5ee
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git a/src/table/base/TableCell.tsx b/src/table/base/TableCell.tsx
@@ -14,6 +14,7 @@ export interface CellProps<D extends DataType> extends BaseTableCol<DataType> {
   rowSpan?: number;
   colSpan?: number;
   customRender: Function;
+  isFirstChildTdSetBorderWidth?: Boolean;
 }
 
 const TableCell = <D extends DataType>(props: PropsWithChildren<CellProps<D>>) => {
@@ -33,6 +34,7 @@ const TableCell = <D extends DataType>(props: PropsWithChildren<CellProps<D>>) =
     className,
     rowSpan,
     colSpan,
+    isFirstChildTdSetBorderWidth,
   } = props;
 
   const { classPrefix } = useConfig();
@@ -69,15 +71,15 @@ const TableCell = <D extends DataType>(props: PropsWithChildren<CellProps<D>>) =
     cellStyle.position = 'sticky';
     cellStyle[fixed] = offset;
   }
-  if (width) {
-    style.overflow = 'hidden';
+  if (width && !fixed) {
+    cellStyle.overflow = 'hidden';
+  }
+  if (isFirstChildTdSetBorderWidth) {
+    cellStyle.borderWidth = 1;
   }
 
-  // 样式依靠 td，之后实现请改为 th
-  // const Component = type === 'title' ? 'td' : 'td'; // codecc error
-  const Component = 'td';
   return (
-    <Component
+    <td
       ref={ref}
       style={cellStyle}
       className={classnames({
@@ -91,7 +93,7 @@ const TableCell = <D extends DataType>(props: PropsWithChildren<CellProps<D>>) =
       colSpan={colSpan}
     >
       {cellNode}
-    </Component>
+    </td>
   );
 };
 

diff --git a/src/table/base/TableHeader.tsx b/src/table/base/TableHeader.tsx
@@ -90,13 +90,27 @@ const TableHeader = <D extends DataType>(props: TableHeaderProps<D>) => {
     return () => null;
   }
 
+  /**
+   * 行的第一列td css设置borderWidth为0（其余列默认为1），上一行第一列存在跨行时，需补回该borderWidth为1
+   */
+  function getIsFirstChildTdSetBorderWidth({ trsColumns, rowIndex, colIndex }) {
+    if (colIndex === 0 && rowIndex > 0) {
+      const preRowColumns = trsColumns[rowIndex - 1];
+      if (preRowColumns[0].rowSpan > 1) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   return (
     <thead>
-      {trsColumns.map((trsColumnsItem: CellProps<D>[], index) => (
-        <tr key={index}>
+      {trsColumns.map((trsColumnsItem: CellProps<D>[], rowIndex) => (
+        <tr key={rowIndex}>
           {trsColumnsItem.map((column: CellProps<D>, colIndex) => {
             const { title, colKey, rowSpan, colSpan, render, ...rest } = column;
             const customRender = getCustomRender({ title, render });
+            const isFirstChildTdSetBorderWidth = getIsFirstChildTdSetBorderWidth({ trsColumns, rowIndex, colIndex });
 
             return (
               <TableCell
@@ -107,6 +121,7 @@ const TableHeader = <D extends DataType>(props: TableHeaderProps<D>) => {
                 customRender={customRender}
                 rowSpan={rowSpan}
                 colSpan={colSpan}
+                isFirstChildTdSetBorderWidth={isFirstChildTdSetBorderWidth}
                 {...rest}
               ></TableCell>
             );

diff --git a/src/table/base/TableRow.tsx b/src/table/base/TableRow.tsx
@@ -35,11 +35,10 @@ const TableRow = <D extends DataType>(props: RowProps<D>) => {
   } = props;
   const { flattenColumns } = useTableContext();
   const flattenColumnsLength = flattenColumns?.length;
-
   const baseRow = flattenColumns.map((column, colIndex) => {
     const { colKey, cell, render, ...restColumnProps } = column;
 
-    const { isSkipRenderTd, rowSpan, colSpan } = getRowSpanAndColSpanAndIsSkipRenderTd({
+    const { isSkipRenderTd, rowSpan, colSpan, isFirstChildTdSetBorderWidth } = getRowSpanAndColSpanAndIsSkipRenderTd({
       isRowspanAndColspanFn,
       rowspanAndColspan,
       rowSkipTdSpanColIndexsMap,
@@ -67,6 +66,7 @@ const TableRow = <D extends DataType>(props: RowProps<D>) => {
         customRender={customRender}
         rowSpan={rowSpan}
         colSpan={colSpan}
+        isFirstChildTdSetBorderWidth={isFirstChildTdSetBorderWidth}
         {...restColumnProps}
       />
     );
@@ -102,10 +102,12 @@ const TableRow = <D extends DataType>(props: RowProps<D>) => {
     rowSpan: number | undefined;
     colSpan: number | undefined;
     isSkipRenderTd: boolean;
+    isFirstChildTdSetBorderWidth: boolean;
   } {
     let rowSpan;
     let colSpan;
     let isSkipRenderTd = false;
+    let isFirstChildTdSetBorderWidth = false;
 
     if (isRowspanAndColspanFn) {
       const rowspanAndColspanValue: RowspanColspan = rowspanAndColspan({
@@ -151,12 +153,14 @@ const TableRow = <D extends DataType>(props: RowProps<D>) => {
         }
       }
       isSkipRenderTd = rowSkipTdSpanColIndexsMap[rowIndex]?.includes(colIndex);
+      isFirstChildTdSetBorderWidth = getIsFirstChildTdSetBorderWidth({ rowSkipTdSpanColIndexsMap, rowIndex });
     }
 
     return {
       rowSpan,
       colSpan,
       isSkipRenderTd,
+      isFirstChildTdSetBorderWidth,
     };
   }
 
@@ -173,6 +177,20 @@ const TableRow = <D extends DataType>(props: RowProps<D>) => {
     return rowSkipTdSpanColIndexs;
   }
 
+  /**
+   * 行的第一列td css设置borderWidth为0（其余列默认为1）上一行第一列存在跨行时，需补回该borderWidth为1
+   */
+  function getIsFirstChildTdSetBorderWidth({ rowSkipTdSpanColIndexsMap, rowIndex }) {
+    if (rowIndex > 0) {
+      const rowSkipTdSpanColIndexs = rowSkipTdSpanColIndexsMap?.[rowIndex];
+      // 简化条件判断：rowSkipTdSpanColIndexs对应第一列td不渲染时，说明上一行存在跨行，当前行所有列borderWidth都设为1
+      if (rowSkipTdSpanColIndexs && rowSkipTdSpanColIndexs[0] === 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   return (
     <tr className={classes} {...(expandOnRowClick ? { onClick: onTrClick } : {})}>
       {baseRow}