ELEMENT UI表格设置表头、行、列或者指定单元格背景色

ELEMENT TABLE表格设置表头、行、列或者指定单元格背景色

<template>
  <el-table
    :data="tableData"
    border
     :header-cell-style="rowClass"
     :cell-style="cellStyle" 
    style="width: 100%">
    <el-table-column
      prop="date"
      label="12/30"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date"
      label="11/01"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date"
      label="12/02"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date"
      label="12/03"
      width="150">
    </el-table-column>
    v
    <el-table-column
      prop="date"
      label="12/05"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date"
      label="12/06"
      width="150">
    </el-table-column>
  </el-table>
</template>
 
methods: {
    // 设置表头的颜色
    rowClass2 ({ row, column, rowIndex, columnIndex }) {
      if ((rowIndex === 1 && columnIndex === 6) || (rowIndex === 1 && columnIndex === 7)){
        return 'background:#FFF1CD!important'
      }
    },
    // 设置指定行、列、具体单元格颜色
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6 || columnIndex === 7) { // 指定坐标rowIndex ：行，columnIndex ：列
        return 'background:#FFF1CD'
      } else {
        return ''
      }
    }

​ 运行结果如下