关于前端:elementui点击table每一行会变色当有固定列的时候

35次阅读

共计 579 个字符,预计需要花费 2 分钟才能阅读完成。

1. html 代码
@row-click=”rowClick”

:row-class-name=”tableRowClassName”

:row-style=”selectedHighlight”

2. js 代码

// 解决当表格有固定列,点击,鼠标悬浮的时候行会变色的问题

tableRowClassName({row, rowIndex}) {

// 把每一行的索引放进 row

row.index = rowIndex;

},

// 解决当表格有固定列,点击,鼠标悬浮的时候行会变色的问题

selectedHighlight({row, rowIndex}) {

if (this.getIndex === rowIndex) {

return {

‘background-color’: ‘#ffeecf !important’

};

}

if(rowIndex % 2 == 0){

return {

‘background-color’: ‘#F9F9F9’

}

}

},

// 解决当表格有固定列,点击,鼠标悬浮的时候行会变色的问题

rowClick(row) {

this.getIndex = row.index;

},

3. css 代码
/ 当 table 有 fixed 固定列的时候,鼠标悬浮一样会变色 /

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

background-color: #FFF9EE !important;

}

正文完
 0