前军教程网

本方案支持颜色自定义，高亮行数自定义，可高亮多行，可定义多个颜色，主要实现方式是css样式，代码简单易懂，下面看效果和代码吧：

当前效果：

预期效果：

代码：这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName”

```

<el-table

:data="tableData"

style="width: 100%"

:row-class-name="tableRowClassName">

<el-table-column

prop="date"

label="日期"

width="180">

</el-table-column>

<el-table-column

prop="name"

label="姓名"

width="180">

</el-table-column>

<el-table-column

prop="address"

label="地址">

</el-table-column>

</el-table>

```

这是JS代码 注册这个方法tableRowClassName()，这里传的rowIndex就是需要高亮的数据在数组里面的下标，返回的class类名就是你自己定义的class类名。

```javascript

methods: {

tableRowClassName({row, rowIndex}) {

if (rowIndex === 1) {

return 'warning-row';

} else if (rowIndex === 3) {

return 'success-row';

}

return '';

}

},

这是CSS代码，颜色可以自定义，class类名可自定义

```css
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
```