Table: update hover effect. (#803)

ElemeFE · Nov 3, 2016 · afb68c7 · afb68c7
1 parent 855d631
commit afb68c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
@@ -32,6 +32,7 @@ export default {
               <tr
                 on-click={ ($event) => this.handleClick($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
+                on-mouseleave={ _ => this.handleMouseLeave() }
                 class={ this.getRowClass(row, $index) }>
                 {
                   this._l(this.columns, (column, cellIndex) =>
@@ -145,6 +146,10 @@ export default {
       this.store.commit('setHoverRow', index);
     },
 
+    handleMouseLeave() {
+      this.store.commit('setHoverRow', null);
+    },
+
     handleClick(event, row) {
       const table = this.$parent;
       const cell = getCell(event);

diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
@@ -322,8 +322,12 @@
     }
 
     @e body {
-      tr {
-        transition: background-color .25s ease-in-out;
+      td {
+        transition: background-color .25s ease;
+      }
+
+      tr.hover-row td {
+        background-color: #eff2f7;
       }
 
       tr.current-row {
@@ -359,7 +363,3 @@
     }
   }
 }
-
-.el-table .el-table__body tr.hover-row {
-  background-color: #eff2f7;
-}