elementui el-table 动态多表头的背景颜色

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

<template>
  <div>
    <el-table :data="data" :header-cell-class-name="headerStyle">
      <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
    </el-table>
  </div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
  components: {
    MyColumn
  },
  data() {
    return {
      col: [
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          label: '地址',
          children: [
            {
              prop: 'province',
              label: '省份'
            },
            {
              prop: 'city',
              label: '市区'
            },
            // {
            //   prop: 'address',
            //   label: '地址'
            // }
          ]
        },
        {
          label: '地址',
          children: [
            {
              prop: 'province',
              label: '省份'
            },
            {
              prop: 'city',
              label: '市区'
            },
            // {
            //   prop: 'address',
            //   label: '地址'
            // }
          ]
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          label: '地址',
          children: [
            // {
            //   prop: 'province',
            //   label: '省份'
            // },
            // {
            //   prop: 'city',
            //   label: '市区'
            // },
            {
              prop: 'address',
              label: '地址'
            }
          ]
        },
        {
          label: '地址',
          children: [
            // {
            //   prop: 'province',
            //   label: '省份'
            // },
            // {
            //   prop: 'city',
            //   label: '市区'
            // },
            {
              prop: 'address',
              label: '地址'
            }
          ]
        }

      ],
      classNameList: ["tableStyle2", "tableStyle3", "tableStyle1", "tableStyle2", "tableStyle3"],
      data: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          action: "操作"
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
  },
  computed: {
    columnLength() {
      return this.col.length
    },
    childrenlength() {
      const arr = this.col.filter(i => i.children)
      return [arr[0].children.length, arr[2].children.length]
    }
  },
  methods: {
    headerStyle({ column, rowIndex, columnIndex }) {
      if (column.rowSpan === 2) {
        return "tableStyle1"
      } else {
        if (rowIndex === 0) {
          return this.classNameList[columnIndex - (this.columnLength - 5)]
        } else if (rowIndex === 1) {
          if (columnIndex < 2 * this.childrenlength[0]) {
            return this.classNameList[Math.floor(columnIndex / this.childrenlength[0])]
          } else {
            return this.classNameList[Math.floor((columnIndex - this.childrenlength[0] * 2) / this.childrenlength[1])]
          }
        }
      }
    }
  }
}
</script>
<style>
.tableStyle1 {
  background-color: red !important;
  color: #fff;
  font-weight: 400;
}
.tableStyle2 {
  background-color: green !important;
  color: #fff;
  font-weight: 400;
}
.tableStyle3 {
  background-color: #1989fa !important;
  color: #fff;
  font-weight: 400;
}
</style>