vue el-table指定修改某行的样式

vue el-table指定修改某行的样式

• 修改指定行的背景颜色
• 修改指定行的行高

具体：

1.html

<el-table :data="tableData"  :row-class-name="tableRowSetting" style="width: 100%">
                <el-table-column prop="monthCompletion" label="完成率" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{(scope.row.monthCompletion*100).toFixed(2)+'%'}}
                  </template>
                </el-table-column>
                <el-table-column prop="rank" label="完成率排名" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div class="mrrank">
                      <span>{{ scope.row.rank }}</span>
                    </div>
                  </template>

                </el-table-column>
              </el-table-column>
            </el-table>

2.js

tableRowSetting({ row }){
        // 根据if条件定义到该行
        if(row.rank=== 1){
            return 'has-color';
        }
          return '';
      },

3.css

style>
.has-color{
          background-color:rgb(120, 149, 247) !important; //加上背景颜色
          font-weight:bold; //字体加粗
          height: 28px;   //自定义行高
        }
</style>