[element-ui] 根据数据给el-table相关行添加背景色

方法一：

<el-table :data="tableData" style="width: 100%" :cell-style="tableRowStyleName">

cell-style绑定的tableRowStyleName返回的是具体样式

tableRowStyleName({row}) {
  if(row.item_name == 'aaa'){
    return 'background-color: #E0E0E0 !important;';
  }
}

方法二：

<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

row-class-name绑定的tableRowStyleName返回的是类名

tableRowClassName({row}) {
          if(row.item_name == 'aaa'){
            return 'row-grey';
          }
        }

<style>
  .row-grey{
    background-color: #E0E0E0 !important;
  }
</style>

在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效，所以不能放在里面。

​​Vue 根据数据给el-table相关行添加背景色​​