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

最新推荐文章于 2024-08-30 19:07:11 发布

原创最新推荐文章于 2024-08-30 19:07:11 发布 · 置顶 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #html5 #html

本文介绍如何在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'}
 }