element UI 中表格el-table设置表头文字和表格内容居中显示

分类:计算机 | 前端 | ElementUI | 综合 74
更新:2021-04-13 21:09:26
编辑

表头文字和表格内容都居中

这个比较简单,直接在el-table-column中添加属性align="center"即可,代码如下:

<el-table :data="tableData" style="width: 80%" border height="360">
            <el-table-column prop="name" label="姓名" width="100" align="center">
            </el-table-column>
</el-table>

只设置表头文字居中,表格内容不设置居中

  1. 在el-table的标签添加一个属性方法(:header-cell-style="headClass")
  2. 在methods中设置一个headClass方法
<el-table :data="tableData" style="width: 80%" border height="360" :header-cell-style="headClass">
            <el-table-column prop="name" label="姓名" width="100" align="center">
            </el-table-column>
</el-table>

methods: {
                headClass() { //表头居中显示
                    return "text-align:center"
         },
}