table组件实现首行合计(el-table, a-table)

1.需求: el-table实现首行合计

  • 说明:该合计为全局合计,字段后端返回,主要处理显示问题(之前是尾行合计)
  • 整个系统都要实现首行合计,可以把css放在app.vue文件中即可
1.在官网控制台调试
2.el-table 的实现的效果

order默认值为0,只需将表体order置为1即可移到最后,这样合计行就上移到表体上方

js 复制代码
    .el-table__body-wrapper {
      order: 1;
    }
 
    // 若没有固定列,以下代码可以不写
    // 将固定列放在首行
   ::v-deep .el-table__fixed-body-wrapper {
      top: 96px !important; // 根据自己的项目进行微调
    }
 
    ::v-deep .el-table__fixed-footer-wrapper {
      z-index: 0;
    }

2.字节跳动开源ui组件库 arco.design 中a-table实现首行合计

  • 尾行合计

  • 首行合计

  • 注意:haeder和body类名相同
  • 实现:
js 复制代码
.arco-table-content .arco-scrollbar:nth-child(2) {
  order: 1 !important;
}

参考1:blog.csdn.net/qq_44170108...

参考2

相关推荐
KenXu2 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|10 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青11 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥12 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb19 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端26 分钟前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件31 分钟前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少33 分钟前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_33 分钟前
JS-SDK开发企微侧边栏
前端·javascript
FlowGram40 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码