前端 鼠标悬浮 显示层-鼠标悬浮显示效果

【前端技术】elementui点击表格每一行都会变色当有固定列时，

1.html代码

@row-click="rowClick"

:row-class-name="tableRowClassName"

:row-style="selectedHighlight"

2.js代码

// 解决表格有固定列时，行会变色的问题，点击，鼠标悬停

tableRowClassName({ row, rowIndex }) {

// 将每一行的索引放入行中

row.index = rowIndex;

},

// 解决表格有固定列时前端 鼠标悬浮 显示层，行会变色的问题，点击，鼠标悬停

selectedHighlight({ row, rowIndex }) {

如果（这个。getIndex === rowIndex）{

返回 {

'背景颜色'：'#ffeecf！重要'

};

}

如果（rowIndex % 2 == 0）{

返回 {

'背景色'：'#F9F9F9'

}

}

},

// 解决表格有固定列时，行会变色的问题前端 鼠标悬浮 显示层，点击，鼠标悬停

行点击（行）{

this.getIndex = row.index;

},

3.CSS代码

/ 当表格有固定列时，鼠标悬停时颜色会发生变化 /

.el-table__body .el-table__row.hover-row td {

背景色：#FFF9EE！重要；

}

以上是【前端技术】elementui点击表格每一行都会变色。 当有固定栏目时，源链接的全部内容：