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>