Element UI表格隔行变色_el-table隔行变色

表格隔行变色有两种方式

 第一种，我们给表格设置“stripe”属性

<el-table
          :data="tableWarningData"
          style="width: 100%"
          :header-cell-style="{ color: '#1572e9' }"
          stripe
          :cell-style="changeCellStyle">

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

.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped
.el-table__row--striped td {
  background-color:#eaf3fb;
}

第二种，我们给表格设置row-class-name属性

<el-table
            :data="tableCreditData"
            style="width: 100%"
            :header-cell-style="{ color: '#1572e9' }"
            :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里面的样式，避坑！！！