vue中Element-ui，table组件表头修改

一、element-ui自己的方法header-cell-style

header-cell-style可选值为对象或是函数

1.选值为对象时

<el-table   
  :data="tableData"    
  :header-cell-style="{background:'#000',color:'#fff',height:'40px',lineHeight:'40px'，padding：0}"   
  border    
  style="width: 100%">

效果对比图：

添加前：

添加后：

2.选值为函数时

首先在methods定义函数

methods: {     
     handleCellStyle(){        
       return {         
          background:'#000',         
          color:'#fff',          
          height:'40px',        
          lineHeight:'40px' ,
          padding:0      
        }      
    }    
}

在el-table添加自定义属性如下代码

<el-table   
 :data="tableData"    
 :header-cell-style="handleCellStyle"    
 border    
 style="width: 100%">

可实现效果同上。

二、在style中添加样式去覆盖原有样式

代码如下

.el-table__header tr,  .el-table__header th {    padding: 0;    text-align: center;    height:40px;    line-height: 40px;}.el-table__body tr,  .el-table__body td {    padding: 0;    height: 40px;    text-align: center;}

.el-table__header th  是表头的样式，.el-table__body td是表格的样式。