el-table样式的变色

 <el-table
              :data="tableData"
              :cell-style="columnStyle"
              :header-cell-style="tableHeaderColor"
              :span-method="objectSpanMethod"
              border
              style="width: 100%; margin-top: 20px; line-height: 30px"
            >
              <el-table-column prop="id" label="时间" width="100">
              </el-table-column>
              <el-table-column prop="amount" label=""> </el-table-column>
              <el-table-column prop="name" label="星期日"> </el-table-column>
              <el-table-column prop="amount1" label="星期一"> </el-table-column>
              <el-table-column prop="amount2" label="星期二"> </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>

tableData: [
{
id: “上午”,
name: “”,
amount: “第一节”,
amount1: “数学”,
amount2: “英语”,
amount3: “数学”,
amount4: “语文”,
amount5: “语文”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第二节”,
amount1: “英语”,
amount2: “数学”,
amount3: “语文”,
amount4: “英语”,
amount5: “英语”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第三节”,
amount1: “美术”,
amount2: “语文”,
amount3: “英语”,
amount4: “数学”,
amount5: “数学”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第四节”,
amount1: “数学”,
amount2: “生物”,
amount3: “语文”,
amount4: “语文”,
amount5: “语文”,
amount6: “”,
},
{
id: “下午”,
name: “”,
amount: “第五节”,
amount1: “历史”,
amount2: “音乐”,
amount3: “数学”,
amount4: “语文”,
amount5: “历史”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第六节”,
amount1: “数学”,
amount2: “历史”,
amount3: “语文”,
amount4: “历史”,
amount5: “自习”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第七节”,
amount1: “数学”,
amount2: “历史”,
amount3: “语文”,
amount4: “自习”,
amount5: “自习”,
amount6: “”,
},
{
id: “”,
name: “”,
amount: “第八节”,
amount1: “物理”,
amount2: “物理”,
amount3: “物理”,
amount4: “自习”,
amount5: “数学”,
amount6: “”,
},
],
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// eslint-disable-line no-unused-vars
if (rowIndex % 4 === 0) {
if (columnIndex === 0) {
return [4, 2];
} else if (columnIndex === 2) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// eslint-disable-line no-unused-vars
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1,
};
} else {
return {
rowspan: 1,
colspan: 0,
};
}
}
},
//row, 每一行上的数据
//column, 每一列上的数据
//rowIndex, 行数的下标从0开始
//columnIndex 列数下标从0开始

columnStyle({ row, column, rowIndex, columnIndex }) {
  if (
    (columnIndex == 2 && rowIndex == 2) ||
    columnIndex == 3 ||
    columnIndex == 4 ||
    (columnIndex == 5 && rowIndex == 5) ||
    columnIndex == 6 ||
    columnIndex == 7 ||
    columnIndex == 8
  ) {
    if (
      (columnIndex == 2 && rowIndex == 2) ||
      columnIndex == 3 ||
      (columnIndex == 4 && rowIndex == 4) ||
      (columnIndex == 5 && rowIndex == 5 && columnIndex == 6) ||
      (columnIndex == 7 && rowIndex == 7) ||
      columnIndex == 8
    ) {
      return "color:blue;cursor: pointer";
    }
    return "color:orange";
  }
},

tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 0 || rowIndex === 3) {
    return "color: #000;font-weight: 800;";
  }
},

},
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

<template>
  <div class="table">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px; line-height: 30px"
    >
      <el-table-column prop="id" label="时间" width="100"> </el-table-column>
      <el-table-column prop="amount" label=""> </el-table-column>
      <el-table-column prop="name" label="星期日"> </el-table-column>
      <el-table-column prop="amount1" label="星期一"> </el-table-column>
      <el-table-column prop="amount2" label="星期二"> </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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "上午",
          name: "",
          amount: "第一节",
          amount1: "数学",
          amount2: "英语",
          amount3: "数学",
           amount4: "语文",
            amount5: "语文",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第二节",
          amount1: "英语",
          amount2: "数学",
          amount3: "语文",
           amount4: "英语",
            amount5: "英语",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第三节",
          amount1: "美术",
          amount2: "语文",
          amount3: "英语",
           amount4: "数学",
            amount5: "数学",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第四节",
          amount1: "数学",
          amount2: "生物",
          amount3: "语文",
           amount4: "语文",
            amount5: "语文",
             amount6: "",
        },
        {
          id: "下午",
          name: "",
            amount: "第五节",
          amount1: "历史",
          amount2: "音乐",
          amount3: "数学",
           amount4: "语文",
            amount5: "历史",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第六节",
          amount1: "数学",
          amount2: "历史",
          amount3: "语文",
           amount4: "历史",
            amount5: "自习",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第七节",
          amount1: "数学",
          amount2: "历史",
          amount3: "语文",
           amount4: "自习",
            amount5: "自习",
             amount6: "",
        },
        {
          id: "",
          name: "",
            amount: "第八节",
          amount1: "物理",
          amount2: "物理",
          amount3: "物理",
           amount4: "自习",
            amount5: "数学",
             amount6: "",
        },
      ],
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {  // eslint-disable-line no-unused-vars
    

      if (rowIndex % 4 === 0) {
        if (columnIndex === 0) {
          return [4, 2];
        } else if (columnIndex === 2) {
          return [0, 0];
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { // eslint-disable-line no-unused-vars
     

      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>
<style  scoped>
</style>