el-table 设置表头居中 ，表格内容某一列单独居中或左对齐或者右对齐

2023年2月18日 749次阅读 来源: 南北极之间

 方法：

表头可以用：:header-cell-style=”{‘text-align’:’center’}”

具体列可以分别设置align=”left” align=”center”  align=”right”

实例：

可以用elementui 官方的例子做演示：

Element – The world’s most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库《el-table 设置表头居中 ，表格内容某一列单独居中或左对齐或者右对齐》https://element.eleme.cn/#/zh-CN/component/table

 默认是左对齐：

《el-table 设置表头居中 ，表格内容某一列单独居中或左对齐或者右对齐》

 《el-table 设置表头居中 ，表格内容某一列单独居中或左对齐或者右对齐》

 我们修改之后：

效果：

表头全部居中了；

3列内容，分别左对齐、居中、右对齐

《el-table 设置表头居中 ，表格内容某一列单独居中或左对齐或者右对齐》

代码：

  <template>
    <el-table :data="tableData" border stripe :header-cell-style="{'text-align':'center'}" style="width: 100%">
      <el-table-column prop="date" label="日期" align="left" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="right" width="260">
      </el-table-column>
    </el-table>
  </template>

    原文作者：南北极之间
    原文地址: https://blog.csdn.net/qq_22182989/article/details/121632494
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞