Element-Ui中Table表格底部合计计算

已于 2023-07-11 21:33:49 修改
阅读量1.2k 收藏 12
点赞数 6
CC 4.0 BY-SA版权
分类专栏： PC管理后台 文章标签： vue.js javascript
于 2023-05-25 00:39:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53033364/article/details/130858054

虽然element-ui里面的table标签给我们提供了一个show-summary属性,但是他会把整个table中的所有数据都会计算并在底部出现.里面夹杂着我们不想让它合计计算的数据.那该怎么去除呢?往下看...

上图中我们可以看到,收款方式和收款周期,是属于类型,是后端返回给我们的0和1,但是他们却计算了,因为我们只是单纯的使用了element-ui给我们提供的show-summary方法,我们不想让他们计算,由此我们要把它底部的合计去除掉...请看下文

 我们可以使用这个方法即可解决

第一步 除了给table标签添加这个show-summary属性外,还要再给他加一个方法

:summary-method="totalOutYear",当然属性名可以随意取

第二部 在methods中使用 

最低0.47元/天 解锁文章

200万优质内容无限畅学
element ui 表格内容 合计
Solitary的博客
02-14 1337
这里介绍的是如果表单内容需要 返回list 中的多个元素拼接 和 计算合计 <el-table :data="tableData" border style="width: 100%"> <el-table-column label="期间" width="180" align="center"> <template slot-scope="scope"> {{scope.row.years}}年,第{{sc.
Element-ui :el-table 中表尾合计行
lryh_的博客
07-23 710
【代码】Element-ui :el-table 中表尾合计行。
VUE+ELEMENTUI表格的表尾合计
weixin_44229734的博客
07-09 1081
/ 如果无法计算，则显示'N/A'sums[6] = 'N/A';// 如果无法计算，则显示'N/A'// 第一列的合计总数。// 第二列的合计总数。// 第4列的合计总数。// 第5列的合计总数。sums[index] = '合计';
element-plus table合并列、合计行、表格填报添加验证、隐藏或禁用 用户的其它行
最新发布
qq_26408545的博客
06-27 451
文章摘要 本文介绍了Element-Plus表格的三种实用方法：1）通过span-method实现列合并，支持多级费用项目名称的合并显示；2）使用summary-method添加合计行，推荐decimal.js解决小数精度问题；3）结合el-form实现表格数据验证，优化了错误提示样式。文章提供了完整的Vue3代码模板，包含合并单元格逻辑、合计行计算和表单验证实现。此外，还补充了根据用户ID控制行显示/禁用的方法，通过参数校验确保功能稳定性。代码示例展示了如何美化表格样式，使验证错误提示更直观。
element-ui中的el-table的summary-method（合计）的使用
m0_63026408的博客
08-24 6561
优点：可以想表格下面添加多少行都行，缺点：列表的序号会一直往下走。
elementUI表格小合计
记笔记
07-31 673
在表格中指定位置插入小合计。
Vue使用ElementUI对table的指定列进行合算
热门推荐
见证自己学习,成长的记录
03-06 1万+
最近有一个想法，就是记录自己花销的时候，table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。然后我就顺着elementui的table组件寻找相关的demo，还真发现了一个这样的demo。对于这个demo，官方是这么描述的：将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。
vue element-ui中使用表实现合计指定列求和
05-01
在Vue Element-UI中，可以通过使用表格的slot-scope属性和Template语法来实现特定列的求和。 首先，需要在表格中设置...通过简单的设置和Template语法，可以轻松地对指定列的值进行求和，并展示在表格底部的合计行中。
vue element-ui表格的滚动条样式修改
weixin_43829905的博客
12-30 7691
vue element-ui表格的滚动条样式修改 默认element-ui table固定表头或列时，当表列过多出现滚动时，滚动条效果如下，效果不是很好看（个人感觉） 修改前效果： 修改后效果： 满意度加加 直接加全局代码样式修改就可以了 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;
解决element UI中el_table的合计栏在滚动条下方问题
qq_32103525的博客
08-17 5409
解决element UI中el_table的合计栏在滚动条下方问题 最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。 导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。 解决方法： 这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。我在el_table外包裹了一个div，将该div的滚动条显示。 <style> .itemTrading .e
element-ui合计逻辑踩坑
qq_43417003的博客
04-17 1919
' + means[columnIndex] + '元
elementUi中的table实现合计功能——使用插槽的方式灵活(功能实现)
yehaocheng520的博客
09-01 8166
最近在做超市系统，框架还是用的elementUi,在展示表格数据时，有时要求要展示合计功能。 其实elementUi中的table表格中是有合计功能的，但是这个合计不太好。这个合计是每列数据都进行统计。显示不符合我现在的要求。 此时可以使用插槽功能，使用方法如下： 以上图为例：在金额一列后面下下面的代码： <div slot="append" style="display:flex;"> <div class="sum_footer"> <div class=
[element-ui]笔记：el-table开启合计后，计算合计列
m0_74101213的博客
07-11 3080
el-table开启合计后，计算合计列；第一列和第二列为列合计内容，第三列为 第二列合计内容 / 第一列合计内容。
element-ui表格合计封装
zezejingi的博客
12-19 677
element-ui表格合计封装
【Element Ui】el-table合计功能与只统计多选框选中行的指定列数据
alikami的博客
04-19 1471
el-table合计功能与只统计多选框选中行的指定列数据
vue element-ui 表格table列求和（合计行）
qq_32103525的博客
08-17 8900
<el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%"> <el-table-column prop="total1" label="总数" align="center" width="120"></el-table-column> </el-table> show-summ
element-ui添加动态表格并合计行合并行操作
qq_44552416的博客
02-21 3222
项目开发过程中，我们有时候会遇到表格里面数据进行动态添加修改删除的操作，表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用！
element UI 表格实现 表尾合计行 ——小肉包
小肉包的博客
07-27 6557
element UI 表格实现 表尾合计行 可以根据需要计算任意列的合计，效果图如下 说明：
Element ui 表格求和/解决合计行不显示的问题
m0_46714106的博客
08-07 935
在vue渲染结束后需要重新绘制表格，以解决合计行不显示的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值