Element Table 实现点击行变色效果

• 1、el-table组件中对row-style和row-click属性绑定处理函数
• 2、在data中定义currentRowId记录当前点击的行，通过row-click的点击事件进行切换当前行

1、el-table组件中对row-style和row-click属性绑定处理函数

<el-table
  :data="dataList"
  :row-style="rowStyle"
  @row-click="changeCurrentRow"
>
</el-table>

2、在data中定义currentRowId记录当前点击的行，通过row-click的点击事件进行切换当前行

changeCurrentRow(row, column, event) {
  // row.id字段可以是数据列表中的任意唯一字段
  if (this.currentRowId === row.id) return
  this.currentRowId = row.id
  // do something
},

rowStyle ({row, rowIndex}) {
  if (this.currentRowId === row.id) {
    // 此处返回选中行的样式对象，按需设置
    return {
      'background-color': 'rgb(94, 180, 251)',
      'color': 'rgb(255, 255, 255)'
    }
  }
}