elementUI 表格内容居中(详细教程)

在Element UI中，要使表格的内容居中，可以通过设置表格的cell-class-name属性来指定单元格的类名，然后在CSS中定义该类名的样式。

以下是具体的步骤和示例代码：

1. 在Vue组件中，为<el-table>组件添加cell-class-name属性，并指定一个方法来返回类名。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    cell-class-name="table-cell-center"
  >
    <!-- 列定义 -->
  </el-table>
</template>

2. 在Vue组件的<style>标签中或者外部CSS文件中，定义.table-cell-center类的样式，使得单元格内容居中。

<style scoped>
.table-cell-center {
  text-align: center;
  vertical-align: middle;
}
</style>

如果你想让表头（表格的第一行）也居中，你可以添加一个额外的类名来定义表头的样式：

<style scoped>
.table-cell-center {
  text-align: center;
  vertical-align: middle;
}
.el-table .el-table__header-wrapper tr {
  text-align: center;
}
</style>

以上代码将确保Element UI表格中的所有单元格和表头内容居中显示。如果你只想让某些列居中，你可以在cell-class-name属性指定的方法中基于列的条件来返回不同的类名。