mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-07 15:47:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [descriptions] avoid conflict with el-table (#3005)

Browse Source 
Co-authored-by: imwsk <syfzxx@vip.qq.com>

Co-authored-by: imwsk <syfzxx@vip.qq.com>
This commit is contained in:
Aex 2021-08-25 11:00:02 +08:00 committed by GitHub
parent c7e7224f77
commit 84d8d7111e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/components/descriptions/src/descriptions-cell.ts
View File

@ -45,13 +45,13 @@ export default defineComponent({
case 'label':
return h(this.tag, {
style: style,
class: ['el-descriptions__label', { 'is-bordered-label': this.descriptions.border }, labelAlign, labelClassName],
class: ['el-descriptions__cell', 'el-descriptions__label', { 'is-bordered-label': this.descriptions.border }, labelAlign, labelClassName],
colSpan: this.descriptions.direction === 'vertical' ? span : 1,
}, label)
case 'content':
return h(this.tag, {
style: style,
class: ['el-descriptions__content', align, className],
class: ['el-descriptions__cell', 'el-descriptions__content', align, className],
colSpan: this.descriptions.direction === 'vertical' ? span : span * 2 - 1,
}, content)
default:
@ -61,10 +61,10 @@ export default defineComponent({
colSpan: span,
}, [
h('span', {
class: ['el-descriptions__label', labelClassName],
class: ['el-descriptions__cell', 'el-descriptions__label', labelClassName],
}, label),
h('span', {
class: ['el-descriptions__content', className],
class: ['el-descriptions__cell', 'el-descriptions__content', className],
}, content)])
}
},

2
packages/components/descriptions/src/index.vue
View File

@ -10,7 +10,7 @@
</div>
<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}` : '']">
<tbody>
<template v-for="(row, index) in getRows()" :key="index">
<el-descriptions-row :row="row" />

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

@ -26,12 +26,11 @@
color: var(--el-text-color-regular);
background-color: $--color-white;
table {
.#{$namespace}-descriptions__table {
border-collapse: collapse;
width: 100%;
th,
td {
.#{$namespace}-descriptions__cell {
box-sizing: border-box;
text-align: left;
font-weight: normal;
@ -53,31 +52,27 @@
}
.is-bordered {
th,
td {
.#{$namespace}-descriptions__cell {
border: var(--el-descriptions-table-border);
padding: 12px 10px;
}
}
:not(.is-bordered) {
th,
td {
.#{$namespace}-descriptions__cell {
padding-bottom: 12px;
}
}
@include m(medium) {
&.is-bordered {
th,
td {
.#{$namespace}-descriptions__cell {
padding: 10px;
}
}
&:not(.is-bordered) {
th,
td {
.#{$namespace}-descriptions__cell {
padding-bottom: 10px;
}
}
@ -87,15 +82,13 @@
font-size: 12px;
&.is-bordered {
th,
td {
.#{$namespace}-descriptions__cell {
padding: 8px 10px;
}
}
&:not(.is-bordered) {
th,
td {
.#{$namespace}-descriptions__cell {
padding-bottom: 8px;
}
}
@ -105,15 +98,13 @@
font-size: 12px;
&.is-bordered {
th,
td {
.#{$namespace}-descriptions__cell {
padding: 6px 10px;
}
}
&:not(.is-bordered) {
th,
td {
.#{$namespace}-descriptions__cell {
padding-bottom: 6px;
}
}