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

相关推荐
jason_yang1 分钟前
刚发版就背锅?前端版本控制就靠他version-rocket
前端
如果超人不会飞5 分钟前
TinyVue NavMenu导航菜单组件使用指南
前端·vue.js
Jason_chen6 分钟前
Linux 3.0 串口机制深度解析:传统8250驱动与基础RS-232/485支持
linux·前端
TPBoreas9 分钟前
前端面试问题打靶
前端
赵庆明老师10 分钟前
JS检查提交的文件是否合规
开发语言·前端·javascript
禅思院17 分钟前
前端请求取消与调度完全指南:从 AbortController 到企业级优先级架构
前端·设计模式·前端框架
颂love25 分钟前
Vue的两大生态以及组件通信
前端·javascript·vue.js·typescript
甜汤圆28 分钟前
Python 里**自定义数据单元**
前端
cidy_9835 分钟前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端
vivo互联网技术36 分钟前
动效开发不踩坑:几种动效实现方案对比与实战选型
前端·性能优化·动效