el-table 动态给每行增加class属性

el-table 动态给每行增加class属性

html代码

row-class-name属性，绑定方法
:row-class-name=“tableRowClassName”,

<el-table :data="tableData" border :row-class-name="tableRowClassName">
</el-table>

js代码

tableRowClassName({row, rowIndex})，接受到两个参数
① row，行数据
② rowIndex， 行索引

tableRowClassName({row, rowIndex}) {
	// 根据每行的数据，判断isError来增加class属性
	if (row.row.isError === true) {
      return 'warning-row'
    } else {
      return 'success-row'
    }
    // 根据行索引判断，增加class属性
	if (rowIndex === 1) {
	  return 'warning-row';
	} else if (rowIndex === 3) {
	  return 'success-row';
	}
	return '';
}

css代码

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  color: #f24835 !important;
  td{
    color: #f24835 !important;
  }
  }

::v-deep .el-table .success-row{
  color: #00c617 !important;
  td{
    color: #00c617 !important;
  }
}
</style>