diff --git a/.changeset/blue-impalas-brake.md b/.changeset/blue-impalas-brake.md new file mode 100644 index 000000000..7d07fbc4c --- /dev/null +++ b/.changeset/blue-impalas-brake.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(table): 修复合并单元格边框样式问题 diff --git a/.changeset/tame-eels-pump.md b/.changeset/tame-eels-pump.md new file mode 100644 index 000000000..93892ad8c --- /dev/null +++ b/.changeset/tame-eels-pump.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": patch +--- + +fix: 修复合并单元格边框样式问题 diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx index e0fd9845c..76fc80155 100644 --- a/packages/ui/table/src/BaseTable.tsx +++ b/packages/ui/table/src/BaseTable.tsx @@ -17,7 +17,7 @@ import { useEmbedExpand, UseEmbedExpandProps } from './hooks/use-embed-expand' import { TheadContent } from './TheadContent' import { ColGroupContent } from './ColGroupContent' import { TbodyContent } from './TbodyContent' -import { SELECTION_DATA_KEY } from './Table'; +import { SELECTION_DATA_KEY } from './Table' const _role = 'table' const _prefix = getPrefixCls('table') @@ -151,7 +151,7 @@ export const BaseTable = forwardRef( let hasSumColumn = false columns.forEach((column, index) => { - if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) { + if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) { // @ts-ignore sumRow.raw[column.dataKey] = i18n.get('table.total') } @@ -195,6 +195,8 @@ export const BaseTable = forwardRef( } = providedValue const hasBorder = borderedProp ?? bordered + const hasScrollToLeft = scrollSize.scrollLeft === 0 + const hasLeftFixedColumns = leftFrozenColKeys.length > 0 const extraHeader = extra && extra.header const extraFooter = extra && extra.footer @@ -288,6 +290,7 @@ export const BaseTable = forwardRef( prefixCls, className, hasBorder && `${prefixCls}--bordered`, + (hasScrollToLeft || hasLeftFixedColumns) && `${prefixCls}--bordered-left-none`, striped && `${prefixCls}--striped`, size && `${prefixCls}--size-${size}`, virtual && `${prefixCls}--virtual` diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 95decfd04..130eb92ad 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -106,54 +106,42 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default; } &--bordered { - table { - thead { - & > tr > th:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); - } - - & > tr:has(+ tr) { - th:not(.#{$prefix}-header-cell--group-last-column) { - border-right: use-border-size('normal') use-color('gray', 200); - } - } + > .#{$prefix}__wrapper { + border: use-border-size('normal') use-color('gray', 200); - & > tr + tr:last-child { - th { - border-right: use-border-size('normal') use-color('gray', 200); - } - } + .#{$prefix}-header-cell, .#{$prefix}-cell { + border-left: use-border-size('normal') use-color('gray', 200); } - tr { + .#{$prefix}-row { &:last-child { - td { + .#{$prefix}-cell { border-bottom: none; } } - - td:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); - } } } - .#{$prefix}__wrapper { - border: use-border-size('normal') use-color('gray', 200); + &.#{$prefix}--bordered-left-none { + > .#{$prefix}__wrapper { + border-left: none; + } } &.#{$prefix}--virtual { - .#{$prefix}-row { - .#{$prefix}-cell:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); + > .#{$prefix}__wrapper { + .#{$prefix}-row { + .#{$prefix}-cell { + border-bottom: use-border-size('normal') use-color('gray', 200); + } } - } - .#{$prefix}-virtual-row { - &:last-child { - .#{$prefix}-row { - .#{$prefix}-cell { - border-bottom: none; + .#{$prefix}-virtual-row { + &:last-child { + .#{$prefix}-row { + .#{$prefix}-cell { + border-bottom: none; + } } } }