Element: The [Feature Request] adds properties to remove the hover effect of the table rows

Created on 31 Jul 2017 · 12Comments · Source: ElemeFE/element

Existing Component

是

Component Name

el-table

Description

尽管之前已经有人提过 https://github.com/ElemeFE/element/issues/4321
但是解决方式是很粗暴的，如果仅仅是想去掉hover效果，还得添加一个className
并且因为原有样式层级不浅： .el-table--enable-row-hover .el-table__body tr:hover>td
使用者需要弄更深层级的样式才能覆盖该样式
并且，因为该class在子层，即使在有命名约定的情况下，稍不注意就会出现样式冲突的情况

Source

hxlniada

Most helpful comment

需要时手写覆盖，也不是很麻烦
.el-table__body tr.el-table__row.hover-row>td{
background-color:inherit;
}

Aleczhang1992 on 12 Mar 2018

👍2 👎1

All 12 comments

Translation of this issue:

Existing Component

yes

Component Name

El-table

Description

Although someone has mentioned https://github.com/ElemeFE/element/issues/4321 before

But the solution is tough, and if you just want to get rid of the hover effect, you have to add a className
And because the original style hierarchy is not shallow:.El-table--enable-row-hover,.El-table__body, tr:hover>td

The user needs to have a deeper style to override the style
And because the class is on the sublayer, even if there is a naming convention, a slight note of style clashes can occur

element-bot on 31 Jul 2017

但是解决方式是很粗暴的，如果仅仅是想去掉hover效果，还得添加一个className

对于「去掉 hover 效果」这种粒度的自定义，如果都需要添加对应 API 的话，很快 Element 就会变得臃肿不堪。所以这种需求还是用户自己处理。

Leopoldthecoder on 31 Jul 2017

@Leopoldthecoder 这种需求非常常见，又不是什么稀有的需求，就连bootstrap都有相应的class来解决该问题，element为什么不加？

hxlniada on 31 Jul 2017

hover效果很占cpu资源, 当局部滚动嵌套局部滚动时,同时使用固定表格头,固定左右
在mac chrome上, 局部滚动很多行表格时, 我的mac上特别的卡顿,
相反在windows上的chrome还是比较流畅的

cycold on 14 Aug 2017

再次提议, 带状态的表格因为hover特效导致显示效果变差,修改起来也不方便. 这样让状态表格功能也变得十分鸡肋.

Nc32 on 13 Nov 2017

需要时手写覆盖，也不是很麻烦
.el-table__body tr.el-table__row.hover-row>td{
background-color:inherit;
}

Aleczhang1992 on 12 Mar 2018

👍2 👎1

@Aleczhang1992 那照你这么说很多功能都不需要了🙂，全自己手写嘛

hxlniada on 29 Mar 2018

.el-table__body tr.el-table__row.hover-row >td{
background-color:inherit;
}
This is not working. The default hover blocks cell level background color which has special meaning in my case. It would be great to be able to turn off default hover effect.

leapon on 22 Aug 2018

@leapon Try this one:

.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: ... !important;
}

You can put any color you like..

Niks988 on 14 Oct 2018

+1 to have an option to disable row hover effect.
The solution above is not working if you define cell background-color in cell-class-name function.
It just overrides cell background-color with this hover background-color.
With row-class-name it works fine.

waptaxi on 19 Nov 2018

@Aleczhang1992 这种事我不想争，你以为大家弱到这么简单的功能都不会写么？很多典型的功能都可以用一句话写出来，但是这种功能这么常见不集成到框架里？如果框架不方便的地方不提意见反而建议大家忍忍就过去了的话，框架如何进步？

hxlniada on 19 Dec 2018

Is this topic still going on?

Reproduction:

Run this section demo(中文, English) in jsfiddle:

While cursor on the first row, seems ok:

While cursor on the second row:

I wonder if this should be treated as a bug?

Well in my opinion, the hover control is necessary, AND even should be column granularity. Especially when you are customing table column content with template, OR many hack styles needed.

Now, I'm using /deep/ to keep such hacks in scoped style. See https://github.com/vuejs/vue-loader/issues/880, ex:

<style scoped>
.lx-table /deep/ .el-table__body-wrapper .el-table_1_column_2 { background: #fff !important; }
.lx-table /deep/ .el-table__body-wrapper .el-table_1_column_3 { background: #fff !important; }
</style>