el-table中奇偶行背景色顯示不同的顏色
2022-09-06 22:53:13

border
ref="singleTable"
highlight-current-row
@current-change="handleCurrentChange"
:row-class-name="tableRowClassName"
:header-cell-style="{background:'#004d8c',color:'#FFFFFF'}"

(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    tableRowClassName({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'success-row';
      }
      return '';
    },

<style>
.el-table .success-row {
  background: #DFEAF5;
}
</style>