element-ui的table表格控件表头与内容列对齐方式问题

 

                            element-ui的table表格的个别列对齐方式

 

当文章中需要如下效果的时候就不能统一设置如下代码：全部列都居中对齐

 <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266',textAlign:'center'}"
        :cell-style="{textAlign:'center'}"     
       
      >
</el-table>

需要给他写一个回调函数，代码如下

  <el-table
            :header-cell-style="styleObj"
            :cell-style="{textAlign:'center'}"
            
          >
</el-table>
 
//需要单独对齐的模块
  <el-table-column prop="TITLE" label="标题" width="660" align="left">
              <template slot-scope="{row}"> 
                <p @click="toDetail(row)" class="pointer" style="text-align:left"> 
                  {{row.TITLE}}</p>
              </template>
            </el-table-column>



 styleObj({columnIndex}){
 if(columnIndex==1 ){
   return{background:'#eef1f6',color:'#606266' ,textAlign:'left'}
   
 }else{
   return{background:'#eef1f6',color:'#606266' ,textAlign:'center'}
 }