el-table自定义表头样式 两个标题并且标题颜色不同

第一种只设置表头颜色

    <el-table :data="disabilityData" id="table"  border :header-cell-style="{background:'#F7F7F8', color:'#18191B'}">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
    </el-table>

关键代码 :header-cell-style="{background:’#F7F7F8’, color:’#18191B’}"

第二种有两个标题并且标题颜色不同

• template

<el-table 
   :data="tableData"
   :border="false"  
   style="width: 100%"
   :header-cell-style="{background:'linear-gradient(to top, #d2dcef, #fff)'}"          
 >

   <el-table-column :label="`周期费用`" align="center">
     <el-table-column prop="date" label="日期"> </el-table-column>
     <el-table-column prop="name" label="姓名"> </el-table-column>
     <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table-column>
 </el-table>

• data

tableData: [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
   }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1517 弄'
   }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1519 弄'
   }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1516 弄'
   }]

• scss （设置第二行表头为青色，注意这里的::v-deep是scss穿透样式）

::v-deep{
  .is-group{
    tr:nth-child(2) th{
      background: #E3F9F2 !important;
    }
  }
}