Element Plus 表格表头与内容居中实现方法
作者:小布丁时间:2026-10-31 11:12:19浏览:141
本文介绍如何在 Element Plus 中实现表格表头与内容的居中显示。针对单列居中,可直接在 el-table-column 设置 align="center";若需所有列统一居中,则需在 el-table 组件上绑定 :cell-style 和 :header-cell-style 属性,分别指定 textAlign 为 center。
需求
针对 Element Plus 中的表格组件,实现表头及单元格内容的居中显示。

分析
实现单列表头与内容的居中:只需在对应的 el-table-column 组件上添加 align="center" 属性即可。
<el-table-column prop="name" label="商品名称" align="center" />实现表格所有列表头与内容的居中:需在 el-table 组件上添加以下两行配置。
:cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }"
<el-table
fit
:cell-style="{ textAlign: 'center' }"
:data="tableData"
style="
width: 100%"
height="350"
:header-cell-style="{
background: '#f7f7f7',
color: 'rgba(0,0,0,.85)',
'font-weight': '500',
'text-align': 'center'
}"
v-loading="loading"
>
<el-table-column prop="name" label="商品名称" />
</el-table>至此,关于 Element Plus 表格表头和内容居中的介绍完成,更多相关 Element Plus 表格内容居中内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
前端大屏自适应方案:缩放与视口单位对比
2026-10-31 18:19:27
前端大文件分片下载实现:基于localForage与Vue的完整方案
2026-10-31 16:11:47
Vue3 中使用 VueUse 实现指定区域全屏阅读功能
2026-10-31 13:55:05
基于Vue与Pinia实现页面Loading动画及请求拦截处理
2026-10-31 13:54:42
Vue封装Echarts通用组件:Vue2/Vue3 JS/TS三种模板及常用配置事件详解
2026-10-31 11:38:03
