Vue element table 单元格居中对齐

18 min read

实现方法:

可以通过设置表格列的对齐方式来实现 Vue element table 的单元格居中对齐。

在表格的列属性中,设置 column 对象的 align 属性为 'center',如下所示:

<el-table-column prop="name" label="姓名" align="center"></el-table-column>

也可以通过设置表格的默认列属性来实现单元格居中对齐。在 table 标签中,设置属性 column-default 的对象的 align 属性为 'center',如下所示:

<el-table :data="tableData" :column-default="{ align: 'center' }">
  <!-- 表格列属性 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>