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

时间：2024-10-18 07:03:06

 方法：

表头可以用：: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 的桌面端组件库/#/zh-CN/component/table

 默认是左对齐：

 

 我们修改之后：

效果：

表头全部居中了；

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

代码：

  <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>

相关文章