列表el-table选中后改变背景色

<el-table
  ref="singleTable"
  :data="tableData"
  highlight-current-row
  :row-style="rowClass"
  :row-class-name="tableRowClassName"
  @current-change="handleCurrentChange"
  style="width: 100%;vertical-align:middle;align:center; ">
</el-table>

@row-click=“rowClick” 当某一行被点击时会触发该事件

@current-change=“handleCurrentChange” 选中改变是触发

:row-class-name=“tableRowClassName” 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

:row-style=“rowClass” //设置这一行的样式

JS方法如下：

// 变量保存勾选的行
handleCurrentChange(val) {
  this.currentRow = val;
  this.selectedIndex = []
  val.forEach(item => {
    this.selectedIndex.push(item.index)
  })
},
// 勾选的行改变颜色
rowClass({row, rowIndex}){   
  if(this.selectedIndex.includes(rowIndex)) {
    return { "border":"solid 1px #3dffef","background-color":"rgba(185, 221, 249, 0.75)" }
  }       
},
// 把每一行的索引放进row
tableRowClassName({row, rowIndex}){
  row.index=rowIndex;
}