From 9a1e050afdbbac69ea1ee071992b42e6662f8015 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 25 Sep 2024 10:30:36 +0800 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E4=BF=AE=E5=A4=8D=E5=90=88?= =?UTF-8?q?=E5=B9=B6=E5=8D=95=E5=85=83=E6=A0=BC=E8=BE=B9=E6=A1=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98=20(#3005)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/blue-impalas-brake.md | 5 +++ .changeset/tame-eels-pump.md | 5 +++ packages/ui/table/src/BaseTable.tsx | 7 +++- packages/ui/table/src/styles/table.scss | 54 ++++++++++--------------- 4 files changed, 36 insertions(+), 35 deletions(-) create mode 100644 .changeset/blue-impalas-brake.md create mode 100644 .changeset/tame-eels-pump.md diff --git a/.changeset/blue-impalas-brake.md b/.changeset/blue-impalas-brake.md new file mode 100644 index 0000000000..7d07fbc4c8 --- /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 0000000000..93892ad8c0 --- /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 e0fd9845cd..76fc801558 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 95decfd046..130eb92ade 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; + } } } }