test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [table] avoid table border style conflict (#3064)

Browse Source
This commit is contained in:
Aex 2021-08-26 09:58:58 +08:00 committed by GitHub
parent d9b7ef56ea
commit 13c1183cf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/table/src/table-body/render-helper.ts
View File

@ -155,7 +155,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
'td',
{
colspan: store.states.columns.value.length,
class: 'el-table__expanded-cell',
class: 'el-table__cell el-table__expanded-cell',
},
[renderExpanded({ row, $index, store })],
),

2
packages/components/table/src/table-body/styles-helper.ts
View File

@ -111,6 +111,8 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
)
}
classes.push('el-table__cell')
return classes.join(' ')
}
const getSpan = (

2
packages/components/table/src/table-footer/index.ts
View File

@ -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(

2
packages/components/table/src/table-header/style.helper.ts
View File

@ -115,6 +115,8 @@ function useStyle<T>(props: TableHeaderProps<T>) {
)
}
classes.push('el-table__cell')
return classes.join(' ')
}

52
packages/theme-chalk/src/table.scss
View File

@ -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);
}
}