Vue使用ElementUI的el-table组件，处理合计行问题

最新推荐文章于 2025-05-08 15:16:55 发布
最新推荐文章于 2025-05-08 15:16:55 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： 开发中的小问题记录 文章标签： vue css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_28200505/article/details/105534916
版权
本文主要探讨在Vue中使用ElementUI的el-table组件处理合计行显示的问题。当show-summary设置为true时，summary-method会被多次调用，解决方案包括使用特定的触发方法和响应式数据操作。另外，合计行不显示可能是因为ElementUI的布局问题，可以通过添加特定CSS样式来解决，确保合计行始终显示在表格底部。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录标题

一、合计行，在需要的时候调用显示

ElementUI在使用el-table做合计行时，官方文档说明如下：
参考地址：https://element.eleme.cn/#/zh-CN/component/table

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

1.1 问题和现象

<el-table  :summary-method="getSummaries" :show
最低0.47元/天 解锁文章
vue3中el-table实现表格合计行
一个努力搬砖的前端开发
01-08 1908
标签上加属性 show-summary :summary-method=“getSummary”
vue element-ui 表格table列求和（合计行）
qq_32103525的博客
08-17 8883
<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
Vue+elementUI-table组件-多行合计行
热门推荐
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
11-09 1万+
此博客通过投机取巧的方法，将table中本来只有一行的合计行，制作成(伪)多行合计行效果 之所以叫做(伪)多行合计行，是因为这个合计行实际上还是一行，只是通过样式改成了多行的模样~ 参考博客： elementui el-table 多行合计、插入标签_Nancy617的博客-优快云博客https://blog.youkuaiyun.com/Nancy617/article/details/112309507 elementUI官网样例： 将show-summary设置为true就会在表格尾部展示合计行
el-table自定义合并项名称
最新发布
weixin_45668941的博客
05-08 278
el-table自定义合并项名称，通过span-method合并列解决
element-ui中的el-table的summary-method（合计）的使用
m0_63026408的博客
08-24 6312
优点：可以想表格下面添加多少行都行，缺点：列表的序号会一直往下走。
element ui表格自定义合计行
qq_41821445的博客
09-08 4748
前两天在做表格时，需要用到表格合计行，我是这样写的，话不多说上代码 第一步就是先在table中添加show-summary使其显示合计行； 接着就是添加:summary-method="getSummaries"自定义合计规则，方法getSummaries返回一个数组，数组中的各项就会填充在表格合计行中 1、中的columns是每列的信息，data是每行的信息 2、此处是在index=0的这一列显示为“总计” 3、在这个方法是处理我从接口中取到的数据，然后将对应属性的值push到arr..
el-table合计
real_xiaobai的博客
03-23 1541
//表格合计 getSummaries2(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index == 0) { sums[index] = '合计'; return; } const
elementui el-table 多行合计、插入标签
Nancy617的博客
01-07 7002
1.传参 需要获取当前是第几个表格。加ref是为了让表格合计行渲染正常。data是组件自带的参数，index是获取到的外层循环下标。 <el-table :data="item.orderFoodList" show-summary :summary-method="data=>summaries(data,index)" ref="detailTable"> created() { this.getOrderList() }, updated() { // 用于防止表格合计行不显示
vue结合el-table实现表格小计总计需求（summary-method）
@必意玲
01-17 3684
/ 调用后端接口table数据。// 调用后端接口返回的总计数据。
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
vue2.0+elementui 封装table组件
weixin_45581310的博客
08-18 820
vue2.0+elementui 封装table组件
element-ui table合计 小demo
LennieGao的博客
09-19 840
好好学习 ，天天向上。Are you ready? 代码奉上！！！！！！！！！ (vue代码) <template> <div class="box"> <div class="select-form"> <el-form id="company-name" :inline="true" :model="formInline"...
element表格多行合计
阿尔叭叭
06-25 3851
<el-table :data="tableData" border row-key="id" default-expand-all show-summary :summary-method="getSummaries" :tree-props="{ children: 'children' }" > .
vue el-table 合计计算
weixin_49261425的博客
07-30 1238
<el-table :data="tableData" ref="table" tooltip-effect="dark" border show-summary :summary-method="getSummaries" stripe id="table" :max-height="tableHeight" > <el-table-column label="应付账款" prop="yfk" ali..
vue表单增加合计
qq_43048011的博客
07-05 1295
将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。缺点：只能统计当前页的数据，所有数据合计无法做到。
elementUi中的table实现合计功能——使用插槽的方式灵活(功能实现)
yehaocheng520的博客
09-01 8046
最近在做超市系统，框架还是用的elementUi,在展示表格数据时，有时要求要展示合计功能。 其实elementUi中的table表格中是有合计功能的，但是这个合计不太好。这个合计是每列数据都进行统计。显示不符合我现在的要求。 此时可以使用插槽功能，使用方法如下： 以上图为例：在金额一列后面下下面的代码： <div slot="append" style="display:flex;"> <div class="sum_footer"> <div class=
el-table合计行
懒虫的博客
09-01 6505
el-table合计行 ，合计行的多种形式
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格，给表头换颜色。
weixin_37739550的博客
02-21 3149
4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格。3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。1.将show-summary设置为true就会在表格尾部展示合计行。2.借用样式将合计行置顶。
vue使用el-table表单增加合计
weixin_53124862的博客
11-15 832
vue表单增加合计，合计后端返回数据是整个表格的总和，前端这里直接渲染。show-summary ：设置为。summary-method：使用。3.footerMethod方法。2.主要就是这两个地方。就会在表格尾部展示合计行。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值