diff --git a/src/table/base/TableCell.tsx b/src/table/base/TableCell.tsx index e13bfc200..9e7d3a0ac 100644 --- a/src/table/base/TableCell.tsx +++ b/src/table/base/TableCell.tsx @@ -14,6 +14,7 @@ export interface CellProps extends BaseTableCol { rowSpan?: number; colSpan?: number; customRender: Function; + isFirstChildTdSetBorderWidth?: Boolean; } const TableCell = (props: PropsWithChildren>) => { @@ -33,6 +34,7 @@ const TableCell = (props: PropsWithChildren>) = className, rowSpan, colSpan, + isFirstChildTdSetBorderWidth, } = props; const { classPrefix } = useConfig(); @@ -69,15 +71,15 @@ const TableCell = (props: PropsWithChildren>) = 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 ( - (props: PropsWithChildren>) = colSpan={colSpan} > {cellNode} - + ); }; diff --git a/src/table/base/TableHeader.tsx b/src/table/base/TableHeader.tsx index 8aa9d0ea1..c3a471d70 100644 --- a/src/table/base/TableHeader.tsx +++ b/src/table/base/TableHeader.tsx @@ -90,13 +90,27 @@ const TableHeader = (props: TableHeaderProps) => { 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 ( - {trsColumns.map((trsColumnsItem: CellProps[], index) => ( - + {trsColumns.map((trsColumnsItem: CellProps[], rowIndex) => ( + {trsColumnsItem.map((column: CellProps, colIndex) => { const { title, colKey, rowSpan, colSpan, render, ...rest } = column; const customRender = getCustomRender({ title, render }); + const isFirstChildTdSetBorderWidth = getIsFirstChildTdSetBorderWidth({ trsColumns, rowIndex, colIndex }); return ( (props: TableHeaderProps) => { customRender={customRender} rowSpan={rowSpan} colSpan={colSpan} + isFirstChildTdSetBorderWidth={isFirstChildTdSetBorderWidth} {...rest} > ); diff --git a/src/table/base/TableRow.tsx b/src/table/base/TableRow.tsx index 46f61ec63..f19fc2e42 100644 --- a/src/table/base/TableRow.tsx +++ b/src/table/base/TableRow.tsx @@ -35,11 +35,10 @@ const TableRow = (props: RowProps) => { } = 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 = (props: RowProps) => { customRender={customRender} rowSpan={rowSpan} colSpan={colSpan} + isFirstChildTdSetBorderWidth={isFirstChildTdSetBorderWidth} {...restColumnProps} /> ); @@ -102,10 +102,12 @@ const TableRow = (props: RowProps) => { 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 = (props: RowProps) => { } } isSkipRenderTd = rowSkipTdSpanColIndexsMap[rowIndex]?.includes(colIndex); + isFirstChildTdSetBorderWidth = getIsFirstChildTdSetBorderWidth({ rowSkipTdSpanColIndexsMap, rowIndex }); } return { rowSpan, colSpan, isSkipRenderTd, + isFirstChildTdSetBorderWidth, }; } @@ -173,6 +177,20 @@ const TableRow = (props: RowProps) => { 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 ( {baseRow}