背景：项目中发现传统的v-deep穿透表格表头的方法在多级表头中并不适用，即使可以使得完全多级表头样式发生变化，但是也会污染到表格中的行数据。ElementUI中有一个属性可以用来控制表头样式，但使用方法教程比较模糊，所以记录一下

方法

主要是借助于el-tabel上的header-row-style这个属性来控制多级表头的样式。可以接受函数和对象形式，但是函数看起来比较抽象，对象形式可能比较适合我个人。

<el-table:data="data":header-row-style="tableheader">
<el-table-column prop="date" label="日期" width="150"> </el-table-column>
<el-table-column label="配送信息"> 
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="province" label="省份" width="120"> </el-table-column> 
<el-table-column prop="city" label="市区" width="120"> </el-table-column> 
</el-table-column>
</el-table>

computed:{
tableheader(){
    const headerStyle= {background:"pink",border:"1px solid blue"}
   
   return headerStyle;
    //每个样式的value要写成字符串形式。
}
}

当然还有最简单的方法直接在标签的里:header-row-style="{background:"pink",border:"1px solid blue"}"，但是个人比较喜欢写在computed里.

注意

如果改变了多级表头的样式，可能会出现在表格右边出现一条白边(刚开始以为是border找了半天发现不是)。

解决方法就是给样式加上

v-deep:el-table--group ::after{
    background:transparent;
    //或者直接width:0px;
}

ElementUI中多级表头样式控制方法

方法

注意