Element UI表格实现隔行变色

效果图：

给表格设置row-class-name属性

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

然后在methods里面写下如下代码

// 表格隔行变色
tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 === 0) {
        return 'success-row' //这是类名
    } else  {
        return ''
    }
},

在style里面写下“success-row”类的样式

.success-row {background-color:#eaf3fb !important; }

避坑

注意样式要写在<style lang="scss"></style>里面，我之前一直在写在<style lang="scss" scoped></style>里面，导致隔行没有效果，加了"scoped"就是限制样式只能在本组件中使用，就不能覆盖element-ui里面的样式，避坑！！！