Element ui 自定義表格行樣式

如圖：

 

 

代碼：

<div>
          <template>
            <!-- 設置表頭與表格樣式 :row-class-name="tableRowClassName" :header-cell-style="getRowClass"-->
            <el-table
              :data="tableData"
              style="width: 100%;"
              :row-class-name="tableRowClassName"
              :header-cell-style="getRowClass"
            >
              <el-table-column prop="amount1" label="序號" width="120"></el-table-column>
              <el-table-column prop="amount2" label="地區" width="180"></el-table-column>
              <el-table-column prop="amount3" label="瀏覽量"></el-table-column>
              <el-table-column prop="amount4" label="訪客數"></el-table-column>
              <el-table-column prop="amount5" label="商品瀏覽量"></el-table-column>
              <el-table-column prop="amount6" label="商品訪客數"></el-table-column>
            </el-table>
          </template>
        </div>

<script>
export default {
  name: '',
  data () {
    return {
     tableData: [{
        amount1: '1',
        amount2: '廣東',
        amount3: '342',
        amount4: '12',
        amount5: '124',
        amount6: '34'
      },
      {
        amount1: '1',
        amount2: '廣東',
        amount3: '342',
        amount4: '12',
        amount5: '124',
        amount6: '34'
      }]
    }  },
  methods: {

    // 為表格行添加樣式
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'double'　　//  基數行對應的類

      } else {
        return 'single'　　//  偶數行對應的類

      }
    },
    // 為表格頭行添加樣式
    getRowClass ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background:#ebeaef'
      } else {
        return ''
      }
    },

  }
}
</script>

/*更改表格顏色*/
  .double {
    height: 50px;
    background: #f5f5f5 !important;
  }
  .single {
    height: 50px;
    background: #ffffff !important;
  }

 

更多參考：https://www.huanggr.cn/1654.html