From 5709e9b55f83b127a4b2b49ac6a3db065c9dcd71 Mon Sep 17 00:00:00 2001
From: Aex <adaex@qq.com>
Date: Sun, 22 Aug 2021 11:34:17 +0000
Subject: [PATCH 1/5] Descirptions: avoid table style conflict

---
 packages/descriptions/src/descriptions-row.js |  2 ++
 packages/descriptions/src/index.js            |  2 +-
 packages/theme-chalk/src/descriptions.scss    | 20 +++++++++----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/descriptions/src/descriptions-row.js b/packages/descriptions/src/descriptions-row.js
index 9fc05a1dcb..f7a069ae0e 100644
--- 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,6 +45,7 @@ export default {
               row.map(item =>{
                 return (
                   <td
+                    class="el-descriptions-item__cell"
                     class="el-descriptions-item__content"
                     class={['el-descriptions-item__content', item.contentClassName]}
                     style={item.contentStyle}
diff --git a/packages/descriptions/src/index.js b/packages/descriptions/src/index.js
index 560c3ac5a2..43c8c3d364 100644
--- 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/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;
       }
     }

From 25cb53f80864d0beb7c90535202e5d1980786d13 Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Wed, 25 Aug 2021 11:02:57 +0000
Subject: [PATCH 2/5] Table: avoid `th` & `td` style conflict

---
 packages/table/src/table-body.js    |  4 +--
 packages/table/src/table-footer.js  |  4 +--
 packages/table/src/table-header.js  |  4 +--
 packages/theme-chalk/src/table.scss | 45 +++++++++++++++--------------
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 4be819a92a..cff3b70de2 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -201,7 +201,7 @@ export default {
     },
 
     getCellClass(rowIndex, columnIndex, row, column) {
-      const classes = [column.id, column.align, column.className];
+      const classes = ['el-table__cell', column.id, column.align, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');
@@ -404,7 +404,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
index 8d51c97da8..c1b15831cd 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={ ['el-table__cell', ...this.getRowClasses(column, cellIndex)] }>
                 <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
index 656266972a..de19896d62 100644
--- 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>
             )
@@ -260,7 +260,7 @@ export default {
     },
 
     getHeaderCellClass(rowIndex, columnIndex, row, column) {
-      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClassName];
+      const classes = ['el-table__cell', column.id, column.order, column.headerAlign, column.className, column.labelClassName];
 
       if (rowIndex === 0 && this.isCellHidden(columnIndex, row)) {
         classes.push('is-hidden');
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;
     }
   }

From 781fc30e54ef794ae06e90d0174b8d616b6e80f5 Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Wed, 25 Aug 2021 12:56:36 +0000
Subject: [PATCH 3/5] Table: fix class location avoid click event errors

---
 packages/table/src/table-body.js   | 4 ++--
 packages/table/src/table-footer.js | 2 +-
 packages/table/src/table-header.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index cff3b70de2..d64e9a9d6a 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -201,7 +201,7 @@ export default {
     },
 
     getCellClass(rowIndex, columnIndex, row, column) {
-      const classes = ['el-table__cell', column.id, column.align, column.className];
+      const classes = [column.id, column.align, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');
@@ -369,7 +369,7 @@ export default {
             return (
               <td
                 style={ this.getCellStyle($index, cellIndex, row, column) }
-                class={ this.getCellClass($index, cellIndex, row, column) }
+                class={ [...this.getCellClass($index, cellIndex, row, column), 'el-table__cell'] }
                 rowspan={ rowspan }
                 colspan={ colspan }
                 on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
index c1b15831cd..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={ ['el-table__cell', ...this.getRowClasses(column, cellIndex)] }>
+                class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>
                 <div class={ ['cell', column.labelClassName] }>
                   {
                     sums[cellIndex]
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index de19896d62..f6c95852e6 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -105,7 +105,7 @@ export default {
                     on-click={ ($event) => this.handleHeaderClick($event, column) }
                     on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
                     style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
-                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
+                    class={ [...this.getHeaderCellClass(rowIndex, cellIndex, columns, column), 'el-table__cell'] }
                     key={ column.id }>
                     <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
                       {
@@ -260,7 +260,7 @@ export default {
     },
 
     getHeaderCellClass(rowIndex, columnIndex, row, column) {
-      const classes = ['el-table__cell', column.id, column.order, column.headerAlign, column.className, column.labelClassName];
+      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClassName];
 
       if (rowIndex === 0 && this.isCellHidden(columnIndex, row)) {
         classes.push('is-hidden');

From e021807420ea258e2f0b6df3ea70657913681f09 Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Wed, 25 Aug 2021 16:01:15 +0000
Subject: [PATCH 4/5] Table: optimize getCellClass method

---
 packages/table/src/table-body.js   | 4 +++-
 packages/table/src/table-header.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index d64e9a9d6a..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(' ');
     },
 
@@ -369,7 +371,7 @@ export default {
             return (
               <td
                 style={ this.getCellStyle($index, cellIndex, row, column) }
-                class={ [...this.getCellClass($index, cellIndex, row, column), 'el-table__cell'] }
+                class={ this.getCellClass($index, cellIndex, row, column) }
                 rowspan={ rowspan }
                 colspan={ colspan }
                 on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index f6c95852e6..1d1e19dfee 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -105,7 +105,7 @@ export default {
                     on-click={ ($event) => this.handleHeaderClick($event, column) }
                     on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
                     style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
-                    class={ [...this.getHeaderCellClass(rowIndex, cellIndex, columns, column), 'el-table__cell'] }
+                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
                     key={ column.id }>
                     <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
                       {
@@ -286,6 +286,8 @@ export default {
         }));
       }
 
+      classes.push('el-table__cell');
+
       return classes.join(' ');
     },
 

From 4c8ad6db67a4a481c5a279b4ba7b918b81bccd94 Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Thu, 26 Aug 2021 02:57:16 +0000
Subject: [PATCH 5/5] Descriptions: add missing class

---
 packages/descriptions/src/descriptions-row.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/descriptions/src/descriptions-row.js b/packages/descriptions/src/descriptions-row.js
index f7a069ae0e..43669a3d2a 100644
--- a/packages/descriptions/src/descriptions-row.js
+++ b/packages/descriptions/src/descriptions-row.js
@@ -45,9 +45,7 @@ export default {
               row.map(item =>{
                 return (
                   <td
-                    class="el-descriptions-item__cell"
-                    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>
@@ -67,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
@@ -75,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>
@@ -92,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={{