element UI 中表格的表头内容居中，表格内容居中显示

表头内容居中，表格内容居中

方法一：

在每个el-table-column标签上边设置header-align="center"

在每个el-table-column标签上边设置align="center"

<el-table-column
            prop="id"
            label="ID"
            header-align="center"
            align="center"
>
</el-table-column>

 

方法二：

1、在el-table的标签添加一个属性方法：:header-cell-style="headStyle"

      在el-table标签中添加属性:cell-style="rowStyle"

<el-table
        :data="tableData"
        :header-cell-style="headStyle"
        :cell-style="rowStyle"
> 
</el-table>

2、在methods中设置一个headStyle方法

扫描二维码关注公众号，回复： 14645016 查看本文章

      在methods方法中定义方法rowStyle

methods: {
            headStyle(){
                return "text-align:center"
            },
            rowStyle(){
                return "text-align:center"
            }
        }