diff --git a/packages/descriptions/src/descriptions-row.js b/packages/descriptions/src/descriptions-row.js index 9fc05a1dcb..43669a3d2a 100644 --- a/packages/descriptions/src/descriptions-row.js +++ b/packages/descriptions/src/descriptions-row.js @@ -27,6 +27,7 @@ export default { return ( { return ( {item.slots.default} @@ -65,6 +65,7 @@ export default { return ([ {item.label}, {item.slots.default} @@ -90,7 +91,7 @@ export default { { row.map(item=> { return ( - +
- +
{rows.map(row => ( ))} diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 4be819a92a..32e1053d36 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -219,6 +219,8 @@ export default { })); } + classes.push('el-table__cell'); + return classes.join(' '); }, @@ -404,7 +406,7 @@ export default { return [[ tr, - ]]; diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js index 8d51c97da8..cfb32faa55 100644 --- a/packages/table/src/table-footer.js +++ b/packages/table/src/table-footer.js @@ -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'] }>
{ sums[cellIndex] @@ -72,7 +72,7 @@ export default { ) } { - this.hasGutter ?
: '' + this.hasGutter ? : '' } diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 656266972a..1d1e19dfee 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -136,7 +136,7 @@ export default { )) } { - this.hasGutter ? : '' + this.hasGutter ? : '' } ) @@ -286,6 +286,8 @@ export default { })); } + classes.push('el-table__cell'); + return classes.join(' '); }, diff --git a/packages/theme-chalk/src/descriptions.scss b/packages/theme-chalk/src/descriptions.scss index fe575fddda..a076dca639 100644 --- a/packages/theme-chalk/src/descriptions.scss +++ b/packages/theme-chalk/src/descriptions.scss @@ -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; } } diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index 319c5d135a..b7e66d5a17 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -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; } }
+ { renderExpanded(this.$createElement, { row, $index, store: this.store }) }