From 5257b1ede8302c985f2a8aa6e51d9e4303a24b79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Sat, 20 May 2017 23:08:23 -0700
Subject: [PATCH] Table: fix wrong stripe style with expandable rows (#4873)

---
 packages/table/src/table-body.js     | 8 ++++++--
 packages/table/src/table.vue         | 3 +++
 packages/theme-default/src/table.css | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index dd24425f6..d879b8ce4 100644
--- a/packages/table/src/table-body.js
+++ b/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);
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index d96d50c44..cc80776e7 100644
--- a/packages/table/src/table.vue
+++ b/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"
diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
index 0dd03661b..ec3c2b998 100644
--- a/packages/theme-default/src/table.css
+++ b/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;