Element: [Feature Request] Remove row-hover hightlight

[web-surfer]

Existing Component

Yes

Component Name

Table

Description

In tables, when hovering over rows, they are automatically highlighted (it's a grey highlight). Specifically this is controlling the hover:

.el-table--enable-row-hover .el-table__body tr:hover>td

It would be nice if we could turn this off.

[element-bot]

Hi, could you provide a reference for this feature / component?

[a-kriya]

You could perhaps try using one of these table attributes to override the tr hover styling:

[hxlniada]

@syn-zeta 这样其实不太方便，有时候就是想去掉hover，却需要再加一个class，而且说实话这个hover效果要去掉这个样式层级得弄很多才行，不然不够覆盖掉原有样式

[hxlniada]

看了一圈issue感觉作者自己都不太用自己写的组件，有些非常常用的应用场景居然完全不理解，而且非常怕添加新功能

[justintilson]

The table attribute (_row-class-name_ and _row-style suggestions_) above do not work to override the hover functionality.

The only hacky way I could figure out was to add a $ref to the table (<el-table ref="YOUR_REF_STRING_HERE" ...>) then execute the code below in one Vue's lifecycle hooks (beforeMount, mounted):

async mounted () {
      await this.$store.dispatch('some-remote-call-that-loads-table-data')
      this.$refs.YOUR_REF_STRING_HERE.$options._parentVnode.elm.classList.remove('el-table--enable-row-hover')
}

One important detail. The this.$refs... call above must be made AFTER data is loaded or it won't work.

[a-kriya]

@hxlniada @justintilson https://jsfiddle.net/x6pz0yhr/

[justintilson]

@syn-zeta nice solution! way better than mine. thx.

[yozian]

Here is a solution, even if you have fixed columns.

Just override the css class effect in your component .

.hover-row > td {
  background-color: initial !important;
}

[icoom]

正解 @yozian

[gfernandez-me]

Here is a solution, even if you have fixed columns.

Just override the css class effect in your component .

.hover-row > td {
  background-color: initial !important;
}

Awesome