Skip to content

Commit cd44289

Browse files
adaexadaex
authored
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
1 parent c51d2de commit cd44289

File tree

7 files changed

+47
-41
lines changed

7 files changed

+47
-41
lines changed

‎packages/descriptions/src/descriptions-row.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default {
2727
return (
2828
<th
2929
class={{
30+
'el-descriptions-item__cell': true,
3031
'el-descriptions-item__label': true,
3132
'has-colon': elDescriptions.border ? false : elDescriptions.colon,
3233
'is-bordered-label': elDescriptions.border,
@@ -44,8 +45,7 @@ export default {
4445
row.map(item =>{
4546
return (
4647
<td
47-
class="el-descriptions-item__content"
48-
class={['el-descriptions-item__content', item.contentClassName]}
48+
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
4949
style={item.contentStyle}
5050
colSpan={item.props.span}
5151
>{item.slots.default}</td>
@@ -65,6 +65,7 @@ export default {
6565
return ([
6666
<th
6767
class={{
68+
'el-descriptions-item__cell': true,
6869
'el-descriptions-item__label': true,
6970
'is-bordered-label': elDescriptions.border,
7071
[item.labelClassName]: true
@@ -73,7 +74,7 @@ export default {
7374
colSpan="1"
7475
>{item.label}</th>,
7576
<td
76-
class={['el-descriptions-item__content', item.contentClassName]}
77+
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
7778
style={item.contentStyle}
7879
colSpan={item.props.span * 2 - 1}
7980
>{item.slots.default}</td>
@@ -90,7 +91,7 @@ export default {
9091
{
9192
row.map(item=> {
9293
return (
93-
<td class="el-descriptions-item" colSpan={item.props.span}>
94+
<td class="el-descriptions-item el-descriptions-item__cell" colSpan={item.props.span}>
9495
<div class="el-descriptions-item__container">
9596
<span
9697
class={{

‎packages/descriptions/src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export default {
168168
}
169169

170170
<div class="el-descriptions__body">
171-
<table class={[{'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>
171+
<table class={['el-descriptions__table', {'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>
172172
{rows.map(row => (
173173
<DescriptionsRow row={row}></DescriptionsRow>
174174
))}

‎packages/table/src/table-body.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,8 @@ export default {
219219
}));
220220
}
221221

222+
classes.push('el-table__cell');
223+
222224
return classes.join(' ');
223225
},
224226

@@ -404,7 +406,7 @@ export default {
404406
return [[
405407
tr,
406408
<tr key={'expanded-row__' + tr.key}>
407-
<td colspan={ this.columnsCount } class="el-table__expanded-cell">
409+
<td colspan={ this.columnsCount } class="el-table__cell el-table__expanded-cell">
408410
{ renderExpanded(this.$createElement, { row, $index, store: this.store }) }
409411
</td>
410412
</tr>]];

‎packages/table/src/table-footer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default {
6363
key={cellIndex}
6464
colspan={ column.colSpan }
6565
rowspan={ column.rowSpan }
66-
class={ this.getRowClasses(column, cellIndex) }>
66+
class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>
6767
<div class={ ['cell', column.labelClassName] }>
6868
{
6969
sums[cellIndex]
@@ -72,7 +72,7 @@ export default {
7272
</td>)
7373
}
7474
{
75-
this.hasGutter ? <th class="gutter"></th> : ''
75+
this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
7676
}
7777
</tr>
7878
</tbody>

‎packages/table/src/table-header.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export default {
136136
</th>))
137137
}
138138
{
139-
this.hasGutter ? <th class="gutter"></th> : ''
139+
this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
140140
}
141141
</tr>
142142
)
@@ -286,6 +286,8 @@ export default {
286286
}));
287287
}
288288

289+
classes.push('el-table__cell');
290+
289291
return classes.join(' ');
290292
},
291293

‎packages/theme-chalk/src/descriptions.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
color: $--color-text-regular;
2424
background-color: $--color-white;
2525

26-
table {
26+
.el-descriptions__table {
2727
border-collapse: collapse;
2828
width: 100%;
2929
table-layout: fixed;
3030

31-
th, td {
31+
.el-descriptions-item__cell {
3232
box-sizing: border-box;
3333
text-align: left;
3434
font-weight: normal;
@@ -51,27 +51,27 @@
5151

5252
.is-bordered {
5353
table-layout: auto;
54-
th, td {
54+
.el-descriptions-item__cell {
5555
border: $--descriptions-table-border;
5656
padding: 12px 10px;
5757
}
5858
}
5959

6060
:not(.is-bordered) {
61-
th, td {
61+
.el-descriptions-item__cell {
6262
padding-bottom: 12px;
6363
}
6464
}
6565

6666
@include m(medium) {
6767
&.is-bordered {
68-
th, td {
68+
.el-descriptions-item__cell {
6969
padding: 10px;
7070
}
7171
}
7272

7373
&:not(.is-bordered) {
74-
th, td {
74+
.el-descriptions-item__cell {
7575
padding-bottom: 10px;
7676
}
7777
}
@@ -81,13 +81,13 @@
8181
font-size: 12px;
8282

8383
&.is-bordered {
84-
th, td {
84+
.el-descriptions-item__cell {
8585
padding: 8px 10px;
8686
}
8787
}
8888

8989
&:not(.is-bordered) {
90-
th, td {
90+
.el-descriptions-item__cell {
9191
padding-bottom: 8px;
9292
}
9393
}
@@ -97,13 +97,13 @@
9797
font-size: 12px;
9898

9999
&.is-bordered {
100-
th, td {
100+
.el-descriptions-item__cell {
101101
padding: 6px 10px;
102102
}
103103
}
104104

105105
&:not(.is-bordered) {
106-
th, td {
106+
.el-descriptions-item__cell {
107107
padding-bottom: 6px;
108108
}
109109
}

‎packages/theme-chalk/src/table.scss‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
border-right: 0;
9090
border-bottom: 0;
9191

92-
th.gutter, td.gutter {
92+
.el-table__cell.gutter {
9393
border-right-width: 1px;
9494
}
9595
}
@@ -111,13 +111,13 @@
111111
font-weight: 500;
112112

113113
&.is-group {
114-
th {
114+
th.el-table__cell {
115115
background: $--background-color-base;
116116
}
117117
}
118118
}
119119

120-
th, td {
120+
.el-table__cell {
121121
padding: 12px 0;
122122
min-width: 0;
123123
box-sizing: border-box;
@@ -149,21 +149,21 @@
149149
}
150150

151151
@include m(medium) {
152-
th, td {
152+
.el-table__cell {
153153
padding: 10px 0;
154154
}
155155
}
156156

157157
@include m(small) {
158158
font-size: 12px;
159-
th, td {
159+
.el-table__cell {
160160
padding: 8px 0;
161161
}
162162
}
163163

164164
@include m(mini) {
165165
font-size: 12px;
166-
th, td {
166+
.el-table__cell {
167167
padding: 6px 0;
168168
}
169169
}
@@ -176,15 +176,16 @@
176176
}
177177
}
178178

179-
th.is-leaf, td {
179+
th.el-table__cell.is-leaf,
180+
td.el-table__cell {
180181
border-bottom: $--table-border;
181182
}
182183

183-
th.is-sortable {
184+
th.el-table__cell.is-sortable {
184185
cursor: pointer;
185186
}
186187

187-
th {
188+
th.el-table__cell {
188189
overflow: hidden;
189190
user-select: none;
190191
background-color: $--table-header-background-color;
@@ -215,7 +216,7 @@
215216
}
216217
}
217218

218-
td {
219+
td.el-table__cell {
219220
div {
220221
box-sizing: border-box;
221222
}
@@ -280,20 +281,20 @@
280281
border-color: transparent;
281282
}
282283

283-
th, td {
284+
.el-table__cell {
284285
border-right: $--table-border;
285286

286287
&:first-child .cell {
287288
padding-left: 10px;
288289
}
289290
}
290291

291-
th.gutter:last-of-type {
292+
th.el-table__cell.gutter:last-of-type {
292293
border-bottom: $--table-border;
293294
border-bottom-width: 1px;
294295
}
295296

296-
& th {
297+
& th.el-table__cell {
297298
border-bottom: $--table-border;
298299
}
299300
}
@@ -356,7 +357,7 @@
356357
bottom: 0;
357358
z-index: 3;
358359

359-
& tbody td {
360+
& tbody td.el-table__cell {
360361
border-top: $--table-border;
361362
background-color: $--table-row-hover-background-color;
362363
color: $--table-font-color;
@@ -377,7 +378,7 @@
377378

378379
@include e(footer-wrapper) {
379380
margin-top: -1px;
380-
td {
381+
td.el-table__cell {
381382
border-top: $--table-border;
382383
}
383384
}
@@ -390,7 +391,7 @@
390391
@include e((header-wrapper, footer-wrapper)) {
391392
overflow: hidden;
392393

393-
& tbody td {
394+
& tbody td.el-table__cell {
394395
background-color: $--table-row-hover-background-color;
395396
color: $--table-font-color;
396397
}
@@ -481,11 +482,11 @@
481482
@include m(striped) {
482483
& .el-table__body {
483484
& tr.el-table__row--striped {
484-
td {
485+
td.el-table__cell {
485486
background: #FAFAFA;
486487
}
487488

488-
&.current-row td {
489+
&.current-row td.el-table__cell {
489490
background-color: $--table-current-row-background-color;
490491
}
491492
}
@@ -496,14 +497,14 @@
496497
tr.hover-row {
497498
&, &.el-table__row--striped {
498499
&, &.current-row {
499-
> td {
500+
> td.el-table__cell {
500501
background-color: $--table-row-hover-background-color;
501502
}
502503
}
503504
}
504505
}
505506

506-
tr.current-row > td {
507+
tr.current-row > td.el-table__cell {
507508
background-color: $--table-current-row-background-color;
508509
}
509510
}
@@ -531,13 +532,13 @@
531532
}
532533

533534
@include m(enable-row-transition) {
534-
.el-table__body td {
535+
.el-table__body td.el-table__cell {
535536
transition: background-color .25s ease;
536537
}
537538
}
538539

539540
@include m(enable-row-hover) {
540-
.el-table__body tr:hover > td {
541+
.el-table__body tr:hover > td.el-table__cell {
541542
background-color: $--table-row-hover-background-color;
542543
}
543544
}

0 commit comments

Comments
 (0)