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

相关推荐
德育处主任Pro1 天前
从重复搭建到高效生产,RollCode的H5开发新范式
前端
蜡台1 天前
SPA(Single Page Application) Web 应用(即单页应用)架构模式 更新
前端·架构·vue·react·spa·spa更新
网络点点滴1 天前
组件通信-作用域插槽
前端·javascript·vue.js
LZQ <=小氣鬼=>1 天前
React 图片放大镜组件使用文档
javascript·react.js·前端框架·ecmascript
kyriewen111 天前
异步编程:从“回调地狱”到“async/await”的救赎之路
开发语言·前端·javascript·chrome·typescript·ecmascript·html5
早點睡3901 天前
ReactNative项目Openharmony三方库集成实战:@react-native-clipboard/clipboard
javascript·react native·react.js
Old Uncle Tom1 天前
Markdown Viewer 再升级
前端
吴声子夜歌1 天前
JavaScript——数据类型
开发语言·javascript·ecmascript
Luna-player1 天前
Vue3中使用vue-awesome-swiper
前端·vue.js·arcgis
SuperEugene1 天前
Vue3 Pinia 状态管理规范:状态拆分、Actions 写法、持久化实战,避坑状态污染|状态管理与路由规范篇
前端·javascript·vue.js·前端框架·pinia