前端之vue表格居中处理

表头内容居中

方式一:

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

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

方式二:

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

在methods中设置一个headStyle方法

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

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

表内容居中

方式一:

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

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

方式二:

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

在methods方法中定义方法rowStyle

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

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