github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: update hover effect. (#803)

pull/812/head
FuryBean 2016-11-03 21:00:09 +08:00 committed by cinwell.li
parent 855d631f3f
commit afb68c75fa
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/table/src/table-body.js
View File

@ -32,6 +32,7 @@ export default {
<tr <tr
on-click={ ($event) => this.handleClick($event, row) } on-click={ ($event) => this.handleClick($event, row) }
on-mouseenter={ _ => this.handleMouseEnter($index) } on-mouseenter={ _ => this.handleMouseEnter($index) }
on-mouseleave={ _ => this.handleMouseLeave() }
class={ this.getRowClass(row, $index) }> class={ this.getRowClass(row, $index) }>
{ {
this._l(this.columns, (column, cellIndex) => this._l(this.columns, (column, cellIndex) =>
@ -145,6 +146,10 @@ export default {
this.store.commit('setHoverRow', index); this.store.commit('setHoverRow', index);
}, },
handleMouseLeave() {
this.store.commit('setHoverRow', null);
},
handleClick(event, row) { handleClick(event, row) {
const table = this.$parent; const table = this.$parent;
const cell = getCell(event); const cell = getCell(event);

12
packages/theme-default/src/table.css
View File

@ -322,8 +322,12 @@
} }
@e body { @e body {
tr { td {
transition: background-color .25s ease-in-out; transition: background-color .25s ease;
}
tr.hover-row td {
background-color: #eff2f7;
} }
tr.current-row { tr.current-row {
@ -359,7 +363,3 @@
} }
} }
} }
.el-table .el-table__body tr.hover-row {
background-color: #eff2f7;
}