element-ui 设置table表头/单元格居中自定义表头且有分割线

element-ui 设置table表头/单元格居中

在使用 element-ui 的 Table 表格时，其默认表格内容都会居左显示，若想改变表格内容的对齐方式，如图所示，在table 加上如下属性即可完成表格内容居中对齐：

        <el-table :data="table.tableData"  border style="width: 80%" 
     :header-cell-style="{ textAlign: 'center' }"
     :cell-style="{ textAlign: 'center' }"
     </el-table>
     
     
   

自定义表头且有分割线

                 <el-table-column>
                            <template slot="header" slot-scope="scope">
                              <div class="outLine">
                                <div>班次</div>
                                <div style="border-top:1px solid #000">日期</div>
                              </div>
                            </template>
                          </el-table-column>
                          
                        
                        .outLine {
                          width: 30px;
                          margin: 0 auto;
                          font-size: 15px;
                          color: #000;
                          transform: rotate(45deg);
                          -webkit-transform: rotate(35deg);
                          -moz-transform: rotate(45deg);
                          -ms-transform: rotate(45deg);
                          -o-transform: rotate(45deg);
                          /* filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118654752440084436210485, M12=-0.70710678118654752440084436210485, M21=0.70710678118654752440084436210485, M22=0.70710678118654752440084436210485, SizingMethod='auto expand'); */
                        }