github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Descirptions: avoid table style conflict (#21254) 

* Descirptions: avoid table style conflict

* Table: avoid `th` & `td` style conflict

* Table: fix class location avoid click event errors

* Table: optimize getCellClass method

* Descriptions: add missing class
pull/21272/head
Aex 2021-08-26 12:18:08 +08:00 committed by GitHub
parent c51d2deac2
commit cd44289adf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/descriptions/src/descriptions-row.js
View File

@ -27,6 +27,7 @@ export default {
return ( return (
<th <th
class={{ class={{
'el-descriptions-item__cell': true,
'el-descriptions-item__label': true, 'el-descriptions-item__label': true,
'has-colon': elDescriptions.border ? false : elDescriptions.colon, 'has-colon': elDescriptions.border ? false : elDescriptions.colon,
'is-bordered-label': elDescriptions.border, 'is-bordered-label': elDescriptions.border,
@ -44,8 +45,7 @@ export default {
row.map(item =>{ row.map(item =>{
return ( return (
<td <td
class="el-descriptions-item__content" class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
class={['el-descriptions-item__content', item.contentClassName]}
style={item.contentStyle} style={item.contentStyle}
colSpan={item.props.span} colSpan={item.props.span}
>{item.slots.default}</td> >{item.slots.default}</td>
@ -65,6 +65,7 @@ export default {
return ([ return ([
<th <th
class={{ class={{
'el-descriptions-item__cell': true,
'el-descriptions-item__label': true, 'el-descriptions-item__label': true,
'is-bordered-label': elDescriptions.border, 'is-bordered-label': elDescriptions.border,
[item.labelClassName]: true [item.labelClassName]: true
@ -73,7 +74,7 @@ export default {
colSpan="1" colSpan="1"
>{item.label}</th>, >{item.label}</th>,
<td <td
class={['el-descriptions-item__content', item.contentClassName]} class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
style={item.contentStyle} style={item.contentStyle}
colSpan={item.props.span * 2 - 1} colSpan={item.props.span * 2 - 1}
>{item.slots.default}</td> >{item.slots.default}</td>
@ -90,7 +91,7 @@ export default {
{ {
row.map(item=> { row.map(item=> {
return ( return (
<td class="el-descriptions-item" colSpan={item.props.span}> <td class="el-descriptions-item el-descriptions-item__cell" colSpan={item.props.span}>
<div class="el-descriptions-item__container"> <div class="el-descriptions-item__container">
<span <span
class={{ class={{

2
packages/descriptions/src/index.js
View File

@ -168,7 +168,7 @@ export default {
} }
<div class="el-descriptions__body"> <div class="el-descriptions__body">
<table class={[{'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}> <table class={['el-descriptions__table', {'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>
{rows.map(row => ( {rows.map(row => (
<DescriptionsRow row={row}></DescriptionsRow> <DescriptionsRow row={row}></DescriptionsRow>
))} ))}

4
packages/table/src/table-body.js
View File

@ -219,6 +219,8 @@ export default {
})); }));
} }
classes.push('el-table__cell');
return classes.join(' '); return classes.join(' ');
}, },
@ -404,7 +406,7 @@ export default {
return [[ return [[
tr, tr,
<tr key={'expanded-row__' + tr.key}> <tr key={'expanded-row__' + tr.key}>
<td colspan={ this.columnsCount } class="el-table__expanded-cell"> <td colspan={ this.columnsCount } class="el-table__cell el-table__expanded-cell">
{ renderExpanded(this.$createElement, { row, $index, store: this.store }) } { renderExpanded(this.$createElement, { row, $index, store: this.store }) }
</td> </td>
</tr>]]; </tr>]];

4
packages/table/src/table-footer.js
View File

@ -63,7 +63,7 @@ export default {
key={cellIndex} key={cellIndex}
colspan={ column.colSpan } colspan={ column.colSpan }
rowspan={ column.rowSpan } rowspan={ column.rowSpan }
class={ this.getRowClasses(column, cellIndex) }> class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>
<div class={ ['cell', column.labelClassName] }> <div class={ ['cell', column.labelClassName] }>
{ {
sums[cellIndex] sums[cellIndex]
@ -72,7 +72,7 @@ export default {
</td>) </td>)
} }
{ {
this.hasGutter ? <th class="gutter"></th> : '' this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
} }
</tr> </tr>
</tbody> </tbody>

4
packages/table/src/table-header.js
View File

@ -136,7 +136,7 @@ export default {
</th>)) </th>))
} }
{ {
this.hasGutter ? <th class="gutter"></th> : '' this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
} }
</tr> </tr>
) )
@ -286,6 +286,8 @@ export default {
})); }));
} }
classes.push('el-table__cell');
return classes.join(' '); return classes.join(' ');
}, },

20
packages/theme-chalk/src/descriptions.scss
View File

@ -23,12 +23,12 @@
color: $--color-text-regular; color: $--color-text-regular;
background-color: $--color-white; background-color: $--color-white;
table { .el-descriptions__table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
th, td { .el-descriptions-item__cell {
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
@ -51,27 +51,27 @@
.is-bordered { .is-bordered {
table-layout: auto; table-layout: auto;
th, td { .el-descriptions-item__cell {
border: $--descriptions-table-border; border: $--descriptions-table-border;
padding: 12px 10px; padding: 12px 10px;
} }
} }
:not(.is-bordered) { :not(.is-bordered) {
th, td { .el-descriptions-item__cell {
padding-bottom: 12px; padding-bottom: 12px;
} }
} }
@include m(medium) { @include m(medium) {
&.is-bordered { &.is-bordered {
th, td { .el-descriptions-item__cell {
padding: 10px; padding: 10px;
} }
} }
&:not(.is-bordered) { &:not(.is-bordered) {
th, td { .el-descriptions-item__cell {
padding-bottom: 10px; padding-bottom: 10px;
} }
} }
@ -81,13 +81,13 @@
font-size: 12px; font-size: 12px;
&.is-bordered { &.is-bordered {
th, td { .el-descriptions-item__cell {
padding: 8px 10px; padding: 8px 10px;
} }
} }
&:not(.is-bordered) { &:not(.is-bordered) {
th, td { .el-descriptions-item__cell {
padding-bottom: 8px; padding-bottom: 8px;
} }
} }
@ -97,13 +97,13 @@
font-size: 12px; font-size: 12px;
&.is-bordered { &.is-bordered {
th, td { .el-descriptions-item__cell {
padding: 6px 10px; padding: 6px 10px;
} }
} }
&:not(.is-bordered) { &:not(.is-bordered) {
th, td { .el-descriptions-item__cell {
padding-bottom: 6px; padding-bottom: 6px;
} }
} }

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

@ -89,7 +89,7 @@
border-right: 0; border-right: 0;
border-bottom: 0; border-bottom: 0;
th.gutter, td.gutter { .el-table__cell.gutter {
border-right-width: 1px; border-right-width: 1px;
} }
} }
@ -111,13 +111,13 @@
font-weight: 500; font-weight: 500;
&.is-group { &.is-group {
th { th.el-table__cell {
background: $--background-color-base; background: $--background-color-base;
} }
} }
} }
th, td { .el-table__cell {
padding: 12px 0; padding: 12px 0;
min-width: 0; min-width: 0;
box-sizing: border-box; box-sizing: border-box;
@ -149,21 +149,21 @@
} }
@include m(medium) { @include m(medium) {
th, td { .el-table__cell {
padding: 10px 0; padding: 10px 0;
} }
} }
@include m(small) { @include m(small) {
font-size: 12px; font-size: 12px;
th, td { .el-table__cell {
padding: 8px 0; padding: 8px 0;
} }
} }
@include m(mini) { @include m(mini) {
font-size: 12px; font-size: 12px;
th, td { .el-table__cell {
padding: 6px 0; padding: 6px 0;
} }
} }
@ -176,15 +176,16 @@
} }
} }
th.is-leaf, td { th.el-table__cell.is-leaf,
td.el-table__cell {
border-bottom: $--table-border; border-bottom: $--table-border;
} }
th.is-sortable { th.el-table__cell.is-sortable {
cursor: pointer; cursor: pointer;
} }
th { th.el-table__cell {
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
background-color: $--table-header-background-color; background-color: $--table-header-background-color;
@ -215,7 +216,7 @@
} }
} }
td { td.el-table__cell {
div { div {
box-sizing: border-box; box-sizing: border-box;
} }
@ -280,7 +281,7 @@
border-color: transparent; border-color: transparent;
} }
th, td { .el-table__cell {
border-right: $--table-border; border-right: $--table-border;
&:first-child .cell { &:first-child .cell {
@ -288,12 +289,12 @@
} }
} }
th.gutter:last-of-type { th.el-table__cell.gutter:last-of-type {
border-bottom: $--table-border; border-bottom: $--table-border;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
& th { & th.el-table__cell {
border-bottom: $--table-border; border-bottom: $--table-border;
} }
} }
@ -356,7 +357,7 @@
bottom: 0; bottom: 0;
z-index: 3; z-index: 3;
& tbody td { & tbody td.el-table__cell {
border-top: $--table-border; border-top: $--table-border;
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
color: $--table-font-color; color: $--table-font-color;
@ -377,7 +378,7 @@
@include e(footer-wrapper) { @include e(footer-wrapper) {
margin-top: -1px; margin-top: -1px;
td { td.el-table__cell {
border-top: $--table-border; border-top: $--table-border;
} }
} }
@ -390,7 +391,7 @@
@include e((header-wrapper, footer-wrapper)) { @include e((header-wrapper, footer-wrapper)) {
overflow: hidden; overflow: hidden;
& tbody td { & tbody td.el-table__cell {
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
color: $--table-font-color; color: $--table-font-color;
} }
@ -481,11 +482,11 @@
@include m(striped) { @include m(striped) {
& .el-table__body { & .el-table__body {
& tr.el-table__row--striped { & tr.el-table__row--striped {
td { td.el-table__cell {
background: #FAFAFA; background: #FAFAFA;
} }
&.current-row td { &.current-row td.el-table__cell {
background-color: $--table-current-row-background-color; background-color: $--table-current-row-background-color;
} }
} }
@ -496,14 +497,14 @@
tr.hover-row { tr.hover-row {
&, &.el-table__row--striped { &, &.el-table__row--striped {
&, &.current-row { &, &.current-row {
> td { > td.el-table__cell {
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
} }
} }
} }
} }
tr.current-row > td { tr.current-row > td.el-table__cell {
background-color: $--table-current-row-background-color; background-color: $--table-current-row-background-color;
} }
} }
@ -531,13 +532,13 @@
} }
@include m(enable-row-transition) { @include m(enable-row-transition) {
.el-table__body td { .el-table__body td.el-table__cell {
transition: background-color .25s ease; transition: background-color .25s ease;
} }
} }
@include m(enable-row-hover) { @include m(enable-row-hover) {
.el-table__body tr:hover > td { .el-table__body tr:hover > td.el-table__cell {
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
} }
} }