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

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

@ -168,7 +168,7 @@ export default {
}
<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 => (
<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(' ');
},
@ -404,7 +406,7 @@ export default {
return [[
tr,
<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 }) }
</td>
</tr>]];

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

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

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

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

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

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

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

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