如何设置el-table单元格内容居中显示？

Question

在使用 Element UI 开发 Vue 项目时，`el-table` 是常用的表格组件。开发者常遇到的问题是：**如何设置 el-table 单元格内容居中显示？** 虽然 Element UI 提供了 `align` 属性用于设置列内容的对齐方式，但有时即使设置了 `align="center"`，单元格内容仍未居中，尤其是在自定义列模板或使用插槽时更为常见。此外，表头与内容的对齐方式不一致也会影响整体展示效果。 本文将详细介绍如何通过 `align` 属性、自定义 CSS 样式以及配合 `scoped` 样式穿透等方式，实现 el-table 单元格内容的居中对齐，帮助开发者解决这一常见问题。

Answer 1

一、问题背景与常见现象

在使用 Element UI 开发 Vue 项目时，el-table 是一个非常常用的组件，用于展示结构化数据。开发者在开发过程中常常会遇到一个看似简单却容易忽略的问题：如何正确设置单元格内容的居中显示？

虽然 Element UI 提供了 align 属性用于控制列内容的对齐方式，但在某些情况下，例如使用了自定义列模板（template）或插槽（slot），即使设置了 align="center"，内容仍然没有居中。

二、基础方法：使用 align 属性

Element UI 的 el-table-column 提供了 align 属性，用于设置该列内容的对齐方式。基本使用如下：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" align="center"></el-table-column>
  <el-table-column prop="name" label="姓名" align="center"></el-table-column>
</el-table>

该方法适用于标准列内容，但若使用了自定义模板，该属性可能不会生效。

三、进阶方法：使用 scoped 样式设置内容居中

当使用自定义列模板时，align 属性可能无法影响到单元格内部元素。此时可以通过添加自定义 CSS 样式实现内容居中。

<el-table-column label="操作" align="center">
  <template slot-scope="scope">
    <span class="custom-cell">操作按钮</span>
  </template>
</el-table-column>

对应的样式：

<style scoped>
.custom-cell {
  display: block;
  text-align: center;
}
</style>

注意：使用 scoped 样式时，可能需要使用深度选择器来穿透作用域。

四、深度样式穿透：解决 scoped 样式限制

在使用 scoped 样式时，样式可能无法影响到 el-table 内部生成的 DOM 结构。可以使用如下方式穿透样式：

• ::v-deep .el-table .cell
• :deep(.el-table .cell)（Vue 3 + Vue Loader 15.10+）

示例代码：

<style scoped>
::v-deep .el-table .cell {
  text-align: center;
}
</style>

这样可以确保所有 el-table 内部的单元格都居中显示。

五、表头与内容对齐不一致的处理

有时即使内容居中了，但表头仍然左对齐，影响整体视觉一致性。可以通过设置 header-align 属性来统一表头对齐方式：

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

这样可以确保表头与内容对齐方式一致，提升表格的美观性。

六、综合解决方案流程图

graph TD
    A[开始] --> B{是否使用自定义列模板?}
    B -->|是| C[使用 scoped 样式 + 深度选择器]
    B -->|否| D[直接使用 align 属性]
    C --> E[设置 header-align 保持表头对齐]
    D --> E
    E --> F[完成]

七、常见问题排查清单

问题现象	可能原因	解决方案
内容未居中	未使用 align 属性或样式未生效	添加 align="center" 或使用深度样式
表头未居中	未设置 header-align	添加 header-align="center"
scoped 样式无效	样式作用域限制	使用 ::v-deep 或 :deep()