Vue3框架中让table合计居中对齐

第一步:给它加一个类名 center-table 如下:

html 复制代码
 <el-table
      :data="datas.shows"
      max-height="600px"
      show-summary
      stripe
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      class="center-table"
    ></el-table>

第二步: 使用v-deep选择器

css 复制代码
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
}

效果

原创作者:吴小糖

创作时间:2023.11.24

相关推荐
Profile排查笔记17 分钟前
JavaScript 实现浏览器指纹生成:基础字段、Canvas 采样与 SHA-256 摘要
前端·人工智能·后端·自动化
不可能片场18 分钟前
Electron 子进程退化成 node 的 env 陷阱
前端·electron
奋斗吧程序媛20 分钟前
CSV文件导入功能
开发语言·javascript·ecmascript
搬砖记录员22 分钟前
录屏总黑屏?90% 的人没关这个开关——浏览器硬件加速冲突排查指南
前端·音视频开发
promiseThen26 分钟前
我用 7 条铁律管住 Cursor:让 AI 写代码不再「自由发挥」
前端·ai编程
天道kabuto39 分钟前
vue-i18n 升级 9.x 踩坑:正则表达式引发的“花括号”惨案
vue.js
梨想橙汁42 分钟前
JS 核心语法:运算符流程控制、函数、数组与对象实战详解
前端·javascript
七牛开发者43 分钟前
拆解 dsh:Turn 与 Step 如何组织 Agent 主循环
前端·javascript·人工智能
空想兔43 分钟前
前端网络请求的前世今生:从 Ajax、XHR 到 Fetch 和 Axios
javascript
梨想橙汁44 分钟前
JavaScript 零基础入门:引入方式、变量与数据类型,吃透原始与引用类型
前端·javascript