test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-01 03:38:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Table: update hover effect. (#803)

Browse Source
This commit is contained in:
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
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);

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

@ -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;
}