el-table表格顏色

.vue

<el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="couponId"
          label="券ID"
          >
        </el-table-column>
        <el-table-column
          prop="couponName"
          label="券名">
        </el-table-column>
        <el-table-column
          prop="investDurationLimit"
          label="起投期限">
        </el-table-column>
        <el-table-column
          prop="investAmountLimit"
          label="起投金額">
        </el-table-column>
        <el-table-column
          prop="validStartDate"
          label="發券時間">
        </el-table-column>
        <el-table-column
          prop="validEndDate"
          label="過期時間">
        </el-table-column>
        <el-table-column
          prop="couponStatus"
          label="當前狀態">
        </el-table-column>
      </el-table>

.js

methods:{
      tableRowClassName({row, rowIndex}) {
          console.log(rowIndex)
        switch (rowIndex){
          case 1:
            return 'success-row';
            break;
          case 3:
            return 'success-row';
            break;
          case 5:
            return 'success-row';
            break;
          case 7:
            return 'success-row';
            break;
          case 9:
            return 'success-row';
            break;
          case 11:
            return 'success-row';
            break;
          case 13:
            return 'success-row';
            break;
          case 15:
            return 'success-row';
            break;
          case 17:
            return 'success-row';
            break;
          case 19:
            return 'success-row';
            break;
        }
        return '';
      }
}

以下借鑑自： https://blog.csdn.net/CCG_T/article/details/79247397 https://segmentfault.com/q/1010000010216680/a-1020000010217420
//下面通過修改原插件的樣式來顯示點擊的當前行，注意由於是原插件全局的，所以style不能使用scope屬性
<style> //注意了style不能加scoped
.el-table .el-table__body tbody .success-row {
background: #C1CDCD;
}
</style>

注意：//下面通過修改原插件的樣式來顯示點擊的當前行，注意由於是原插件全局的，所以style不能使用scope屬性