elementui更改el-table表头背景颜色和字体颜色

前提：elementui更改el-table表头背景颜色和字体颜色在项目中使用elementui中的el-table时领导觉得这个样式不合适想修改一下，尤其表头与表格内容之间色差，字形，字号等等区别较小不易辨认，降低了用户体验。所以想尝试更改一下表头的背景颜色和字体颜色，具体方法：根据elementui官网的提示，header-cell-style是表头单元格的style的回调方法，也可以使用一个固定的Object(对象)为所有表头单元格设置一样的Style，不会影响生成标准化的代码。

一、根据elementui官网的说法，header-cell-style是表头单元格的 style 的回调方法！！！

 最初的样子：

写下一下代码： 

<template>
<el-table :header-cell-style="{ 
      background:'#e2d2d2',height:'100px',color:'#000000',border: '1px solid tan'}">
...
</el-table>
</template>

实现的结果：

二、 用/deep/深度监听来改变头部样式！！！

最初的样子：

写下一下代码： 

<template>
<el-table 
    class="ones">
...
</el-table>
</template>


<style lang="scss" scoped>
  /deep/ .ones{
  background: #e2d2d2;
  height:100px;
  border: 1px solid #000;
}
</style>

 实现的结果： 

 三、用新样式覆盖覆盖旧样式实现想要的结果！！！

优点：

1.可以更改字体的大小，字体样式；

2.可以设置文字居中；

3.可以user-select这样类型的属性：xxx-xxx:none;

最初的样子：

 写下一下代码：

<template>
            <el-table>(这里没有要新增的方法)
                        </el-table>
</template>
<style lang="scss" >
  .el-table th.el-table__cell {
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #FFF;
    background: cadetblue;
    color: #000;
    border: 1px solid rosybrown;
    font-size: 20px;
    text-align: center;
}
</style>

 实现的结果：