Descirptions: avoid table style conflict (ElemeFE#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
abigail-0111 · Dec 21, 2021 · 79e6064 · 79e6064
1 parent 3ec9aaa
commit 79e6064
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 41 deletions.
diff --git a/packages/descriptions/src/descriptions-row.js b/packages/descriptions/src/descriptions-row.js
@@ -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={{

diff --git a/packages/descriptions/src/index.js b/packages/descriptions/src/index.js
@@ -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>
             ))}

diff --git 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,
           <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>]];

diff --git 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'] }>
                 <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>

diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
@@ -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(' ');
     },
 

diff --git 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
@@ -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,20 +281,20 @@
       border-color: transparent;
     }
 
-    th, td {
+    .el-table__cell {
       border-right: $--table-border;
 
       &:first-child .cell {
         padding-left: 10px;
       }
     }
 
-    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;
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -136,7 +136,7 @@ export default { @@
                       </th>))
                     }
                     {
-                      this.hasGutter ? <th class="gutter"></th> : ''
+                      this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
                     }
                   </tr>
                 )
@@ Expand Down Expand Up / @@ -286,6 +286,8 @@ export default { @@
             }));
           }
+          classes.push('el-table__cell');
           return classes.join(' ');
         },
@@ Expand Down @@