Table: fix wrong stripe style with expandable rows (#4873)

packages/table/src/table-body.js

@@ -14,6 +14,7 @@ export default {
     store: {
       required: true
     },
+    stripe: Boolean,
     context: {},
     layout: {
       required: true
@@ -52,7 +53,7 @@ export default {
                 on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
                 on-mouseleave={ _ => this.handleMouseLeave() }
-                class={ ['el-table__row', this.getRowClass(row, $index)] }>
+                class={ [this.getRowClass(row, $index)] }>
                 {
                   this._l(this.columns, (column, cellIndex) =>
                     <td
@@ -186,8 +187,11 @@ export default {
     },
 
     getRowClass(row, index) {
-      const classes = [];
+      const classes = ['el-table__row'];
 
+      if (this.stripe && index % 2 === 1) {
+        classes.push('el-table__row--striped');
+      }
       const rowClassName = this.rowClassName;
       if (typeof rowClassName === 'string') {
         classes.push(rowClassName);

packages/table/src/table.vue

@@ -26,6 +26,7 @@
       <table-body
         :context="context"
         :store="store"
+        :stripe="stripe"
         :layout="layout"
         :row-class-name="rowClassName"
         :row-style="rowStyle"
@@ -69,6 +70,7 @@
         <table-body
           fixed="left"
           :store="store"
+          :stripe="stripe"
           :layout="layout"
           :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
@@ -110,6 +112,7 @@
         <table-body
           fixed="right"
           :store="store"
+          :stripe="stripe"
           :layout="layout"
           :row-class-name="rowClassName"
           :row-style="rowStyle"

packages/theme-default/src/table.css

@@ -386,7 +386,7 @@
 
     @modifier striped {
       & .el-table__body {
-        & tr:nth-child(2n) {
+        & tr.el-table__row--striped {
           td {
             background: #FAFAFA;
             background-clip: padding-box;