前端：覆盖 el-table 样式el-table本身定义了属性如 header-cell-style，可以通过该属性给

设计mm设计了个非常漂亮的table，然后我就死翘翘了。。。

el-table的样式设置我这面用了两种方法：

el-table 属性

el-table本身定义了属性如 header-cell-style，可以通过该属性给所有表头设定样式。

代码示例：

// template
<el-table
  class="cost-table"
  :data="costList"
  style="width: 100%"
  :header-cell-style="tableHeaderCellStyle"
>
// script
tableHeaderCellStyle ({row, column, rowIndex, columnIndex}) {
  if (columnIndex == 2) {
    return 'height: 54px; padding-right: 65px; text-align: right'
  } else {
    return 'height: 54px; padding-left: 24px;'
  }
}

NOTE: 这种方法可能遇到样式和el-table本身样式冲突，设置不生效的情况。

样式穿透

在实现header font-family等属性设置时，发现样式设置不生效。 google发现是scope的问题，但是又不能去掉scope（去掉scope，会污染全局样式）。后来发现了这个好东西：样式穿透。语法是在穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。

NOTE: stylus用 >>> 实测没问题，scss用 >>> 不生效，需要用 /deep/

这里举个例子，给el-table的header的字体设置样式

// style
.cost-table /deep/ .is-leaf{
    /deep/ .cell{
      height:20px;
      font-size:14px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(33,33,33,1);
      line-height:20px;
    }
}