element-ui中row-class-name的用法

时间:2025-03-03 08:07:56

话不多说,直接上代码

<el-table
  :data="tabledata"
  border
  size="medium"
  :row-class-name="tableRowClassName"
  :default-sort = "{prop: 'zyl', order: 'descending'}"
  height="689"
  style="width: 100%">
//根据数值大小换每条数据的背景颜色
tableRowClassName: function(row) {
  // ()
  if (row.row.zyl >= 80) {
    return 'warm-row';
  }
   return '';
},

想多做变化就多写点if,
注意:上面会返回两个参数,一个row,用来写判断就行。一个rowIndex,用来写行数。由于我在这用不到行数就不写了

.el-table>>>.warm-row {
  background: #F56C6C;
  color: white;
}

关于>>>可以直接跳转这里