From 13c1183cf744b1452982c40dfaf2c3de408f798a Mon Sep 17 00:00:00 2001 From: Aex Date: Thu, 26 Aug 2021 09:58:58 +0800 Subject: [PATCH] fix(components): [table] avoid table border style conflict (#3064) --- .../table/src/table-body/render-helper.ts | 2 +- .../table/src/table-body/styles-helper.ts | 2 + .../table/src/table-footer/index.ts | 2 +- .../table/src/table-header/style.helper.ts | 2 + packages/theme-chalk/src/table.scss | 52 ++++++++----------- 5 files changed, 29 insertions(+), 31 deletions(-) diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts index 0602357c9f..1f842a13a3 100644 --- a/packages/components/table/src/table-body/render-helper.ts +++ b/packages/components/table/src/table-body/render-helper.ts @@ -155,7 +155,7 @@ function useRender(props: Partial>) { 'td', { colspan: store.states.columns.value.length, - class: 'el-table__expanded-cell', + class: 'el-table__cell el-table__expanded-cell', }, [renderExpanded({ row, $index, store })], ), diff --git a/packages/components/table/src/table-body/styles-helper.ts b/packages/components/table/src/table-body/styles-helper.ts index 10a3b5f8be..3bee29319d 100644 --- a/packages/components/table/src/table-body/styles-helper.ts +++ b/packages/components/table/src/table-body/styles-helper.ts @@ -111,6 +111,8 @@ function useStyles(props: Partial>) { ) } + classes.push('el-table__cell') + return classes.join(' ') } const getSpan = ( diff --git a/packages/components/table/src/table-footer/index.ts b/packages/components/table/src/table-footer/index.ts index 1126e0a266..06fa05d34e 100644 --- a/packages/components/table/src/table-footer/index.ts +++ b/packages/components/table/src/table-footer/index.ts @@ -115,7 +115,7 @@ export default defineComponent({ key: cellIndex, colspan: column.colSpan, rowspan: column.rowSpan, - class: this.getRowClasses(column, cellIndex), + class: [...this.getRowClasses(column, cellIndex), 'el-table__cell'], }, [ h( diff --git a/packages/components/table/src/table-header/style.helper.ts b/packages/components/table/src/table-header/style.helper.ts index 45f91e1f14..07f0be62ac 100644 --- a/packages/components/table/src/table-header/style.helper.ts +++ b/packages/components/table/src/table-header/style.helper.ts @@ -115,6 +115,8 @@ function useStyle(props: TableHeaderProps) { ) } + classes.push('el-table__cell') + return classes.join(' ') } diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index dc4b74d312..d8aeec06f1 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -91,8 +91,7 @@ border-right: 0; border-bottom: 0; - th.gutter, - td.gutter { + .#{$namespace}-table__cell.gutter { border-right-width: 1px; } } @@ -114,14 +113,13 @@ font-weight: 500; &.is-group { - th { + th.#{$namespace}-table__cell { background: var(--el-background-color-base); } } } - th, - td { + .#{$namespace}-table__cell { padding: 12px 0; min-width: 0; box-sizing: border-box; @@ -153,24 +151,21 @@ } @include m(medium) { - th, - td { + .#{$namespace}-table__cell { padding: 10px 0; } } @include m(small) { font-size: 12px; - th, - td { + .#{$namespace}-table__cell { padding: 8px 0; } } @include m(mini) { font-size: 12px; - th, - td { + .#{$namespace}-table__cell { padding: 6px 0; } } @@ -183,16 +178,16 @@ } } - th.is-leaf, - td { + th.#{$namespace}-table__cell.is-leaf, + td.#{$namespace}-table__cell { border-bottom: var(--el-table-border); } - th.is-sortable { + th.#{$namespace}-table__cell.is-sortable { cursor: pointer; } - th { + th.#{$namespace}-table__cell { overflow: hidden; user-select: none; background-color: var(--el-table-header-background-color); @@ -221,7 +216,7 @@ } } - td { + td.#{$namespace}-table__cell { div { box-sizing: border-box; } @@ -287,8 +282,7 @@ // border-color: transparent; // } - th, - td { + .#{$namespace}-table__cell { border-right: var(--el-table-border); &:first-child .cell { @@ -296,12 +290,12 @@ } } - th.gutter:last-of-type { + th.#{$namespace}-table__cell.gutter:last-of-type { border-bottom: var(--el-table-border); border-bottom-width: 1px; } - & th { + & th.#{$namespace}-table__cell { border-bottom: var(--el-table-border); } } @@ -364,7 +358,7 @@ bottom: 0; z-index: 3; - & tbody td { + & tbody td.#{$namespace}-table__cell { border-top: var(--el-table-border); background-color: var(--el-table-row-hover-background-color); color: var(--el-table-font-color); @@ -385,7 +379,7 @@ @include e(footer-wrapper) { margin-top: -1px; - td { + td.#{$namespace}-table__cell { border-top: var(--el-table-border); } } @@ -398,7 +392,7 @@ @include e((header-wrapper, footer-wrapper)) { overflow: hidden; - & tbody td { + & tbody td.#{$namespace}-table__cell { background-color: var(--el-table-row-hover-background-color); color: var(--el-table-font-color); } @@ -489,11 +483,11 @@ @include m(striped) { & .#{$namespace}-table__body { & tr.#{$namespace}-table__row--striped { - td { + td.#{$namespace}-table__cell { background: #fafafa; } - &.current-row td { + &.current-row td.#{$namespace}-table__cell { background-color: var(--el-table-current-row-background-color); } } @@ -506,14 +500,14 @@ &.#{$namespace}-table__row--striped { &, &.current-row { - > td { + > td.#{$namespace}-table__cell { background-color: var(--el-table-row-hover-background-color); } } } } - tr.current-row > td { + tr.current-row > td.#{$namespace}-table__cell { background-color: var(--el-table-current-row-background-color); } } @@ -541,13 +535,13 @@ } @include m(enable-row-transition) { - .#{$namespace}-table__body td { + .#{$namespace}-table__body td.#{$namespace}-table__cell { transition: background-color 0.25s ease; } } @include m(enable-row-hover) { - .#{$namespace}-table__body tr:hover > td { + .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell { background-color: var(--el-table-row-hover-background-color); } }