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

相关推荐
IT_陈寒10 小时前
Vite开发实战:从入门到精通
前端·人工智能·后端
普通人610 小时前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
志尊宝10 小时前
AI原生前端开发(043):AI辅助的样式生成(Tailwind CSS)
前端·css·ai-native
志尊宝10 小时前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native
king王一帅10 小时前
QuireKit 编辑器的 AI-Native 是如何设计的?谈谈我对真正 AI-Native 的理解
前端·开源·agent
风骏时光牛马10 小时前
生成一个AI开源工具体验标题,只需要一个标题,不需要其他的任何文本。
前端
软件派11 小时前
生产动态数据智能风控:阈值判别、趋势预测、异常识别算法工程落地实战
前端·数据库·算法
花开盛夏^.^20 小时前
电脑打开多个浏览器Web窗口占用较大的运行内存的原因
前端·浏览器
Dxy123931021620 小时前
JS DES 加密详解
开发语言·javascript·arcgis
充值内卷20 小时前
我给桌面加了个鱼缸:C++ 写后端,WebView2 里养一座 Three.js 小岛
开发语言·javascript·c++