element组件之table表尾指定列求和总计

最新推荐文章于 2024-08-16 11:01:46 发布
最新推荐文章于 2024-08-16 11:01:46 发布
阅读量4.4k 收藏 4
点赞数
分类专栏： element table 文章标签： vue table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XUYIGE/article/details/106942219
版权
这篇博客介绍了如何在Element UI的表格组件中实现指定列的求和总计功能。通常，表尾合计行会自动对所有数值列进行求和，但实际需求可能只需要特定列的总计。通过在methods中添加条件判断，并结合CSS隐藏不需要显示的合计，可以实现这一目标。
摘要由CSDN通过智能技术生成

对element组件的表格进行指定列总计计算：
在这里插入图片描述
在这里插入图片描述
element官网中的表尾合计是只要是有数字的列都会进行合计，而有时开发项目中只需要显示某一列（某几列）的合计结果。

将show-summary设置为true就会在表尾展示合计行。默认情况下，对于合计行，第一列不进行数据求和操作，而是显示合计二字，其余列会将本列所有的数值进行求和操作并显示。

列求和： show-summary :summary-method=" getSummaries"
在这里插入图片描述
在methods里写：

在这里插入图片描述
这样出来的结果是只要有数字的列都会进行求和
在这里插入图片描述
那如果只需要

最低0.47元/天 解锁文章
我是你要找的bug
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
elmentUI el-table表格给某一列添加合计
weixin_56755680的博客
02-19 3417
1.先按照element组件的table给el-table添加 show-summary（是否在表尾显示合计行） 2.想要计算某一列数据 那么就通过summary-method方法返回一个数组，这个数组中的各项就会显示在合计行的各列中，:summary-method="getSummaries"。 3.getSummaries(param) { const { columns, data } = param; const sums = []; columns.fo...
element table 合计 第一行 固定列
weixin_45945615的博客
12-08 1797
element table 合计 第一行 在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获取到表格数据时进行操作, 因为固定列后, 第一列滚动到最底部都样式错乱. watch: { tableData: { handler: function (newName, oldName) { this.$nextTick(() => { // 改变合计行样式
element table表格总计功能
weCat_s的博客
06-03 1024
<el-table :data="businessList" v-loading="loading" :summary-method="getSummaries" show-summary width="800px" > <el-tabl/> getSummaries(param) { const { columns, data } = param; console.
【vue+el-table】实现表尾合计行分两行显示，一行显示勾选项之和，一行显示合计，已实现，具体思路解析
花椒和蕊的博客
07-15 615
（3）定义summaryList数组，需要处理哪些列，就传这样的格式,包含要处理列的字段名，如：[‘payAmt’,‘receiveAmt’]（2）定义ckeckedResult对象，用于和包含处理列的字段名的数组，即summaryList数组进行对比，拿到需要处理列的选中项之和。（2）定义el，将表尾合计行分成两个上下显示的div，便于添加类名和修改样式。（1）在单选和全选事件中，调用表尾合计行方法。（3）在表尾合计行方法中，将勾选项之和回显。2、复选框勾选的时候和表尾合计行联动。
关于elementUI表格 固定列&合计行
nothing_2020的博客
03-23 2147
当elementUI的表格需要 固定列 同时又要y有 合计行 时，会出现以下情况： 合计行被固定的三列可以展示，但是其它的列就不知道去哪了？！ 通过万能的度娘，终于找到了解决方法，不得不说，广大网友的智慧真不是盖的！ 通过思否一个大佬的提示，原网址在这里 直接在接口返回数据之后加上以下代码 this.$nextTick(() => { this.$refs.table.doLayout() }) 由于用到了$refs，所以不要忘了在html的table部分加上ref ! <el-tabl
vue+elementUI 显示表格指定列合计数据
热门推荐
qq_38148024的博客
07-16 1万+
明确需求 下图来自elementUI官网 根据合计行数据的来源可以分为两种情况： 接口返回的数据只有表格中对应每个ID的数据，最后一行的合计是由前端来计算的 表格中的合计行数据是从接口中返回的，不是由前端计算的，只需要将拿到的数据显示即可 对于第一种情况，elementUI官网就有案例。 在开发中遇到了第二种情况，来记录一下处理方案： 1、明确返回数据结构 以上述表格为例： res: { memberInfo: [ { ID: 123456, '姓名'：'王小虎', '数值1'
element-el-table 多级表头
qq_42769032的博客
02-16 727
多级表头
vue element-ui中table合计指定列求和实例
01-18
注意点： 1. <el> 中 加:summary-method=”getSummaries” 2. <el> 中要加 prop // 房间号的合计去掉 getSummaries (param) { ... sums[index] = '总计' } else if (index === 5 || index === 6) {
html做table某一列的合计,vue element-ui中table合计指定列求和实例
weixin_42316952的博客
06-15 2124
注意点：1. 中 加:summary-method="getSummaries"2. 中要加 prop// 房间号的合计去掉getSummaries (param) {const { columns, data } = paramconst sums = []columns.forEach((column, index) => {if (index === 0) {sums[index]...
vue element-ui 表格table列求和（合计行）
qq_32103525的博客
08-17 8548
<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+element-ui动态生成多级表头的方法
12-29
vue+element html配置： {{tableData}} <el-table-column v-if='item.children||item.children
element table只计算最后一列数据总和
huihuiliu_的博客
12-12 2264
需求：element table只计算表格中最后一列的总和 官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。 1、HTML <el-table border show-summary :summary-method="getSummaries" :formatter="formatter" :default-sort = "{prop: 'projectName', order: 'descend
Element UI table多级表头表格加合并行计算差值
weixin_55639682的博客
01-16 499
Element UI table多级表头表格加合并行计算差值
table合计
木昆灵寒酥的博客
12-04 760
返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for…in 循环的顺序相同。（区别在于 for-in 循环枚举原型链中的属性）若在此基础上需要将合计的单元格与相邻的空值单元格进行合并，可进行深度监听+样式修改，见下一篇合并单元格。，合计行和合计行的值都是前端来做，合计数值的非合计行一列的单元格数值相加。后端合计数据+前端合计行样式(需要后端将id字段最后一个id换成合计)
el-table，合计功能，自定义计算功能实现
最新发布
前端阿辉的博客
08-16 270
这里面我是要计算合计之后的占比，一定要在data里面先定义字段，然后再赋值，不然计算不准确// 表尾合计行计算// 需要用到合计的字段bdydkhs: 0sums[index] = '全局'returnif (!} else {})},// 计算百分比} else {},
element中el-table（合计）计算指定列
LW0512的博客
02-07 1824
element中el-table（合计）计算指定列。
elementui中的table表格在最后一行求和并且指定计算合计列
路飞船长的博客
09-20 1031
vue表格计算指定列的总金额并且保留整数或者小数
[element-ui]笔记：el-table开启合计后，计算合计列
m0_74101213的博客
07-11 2730
el-table开启合计后，计算合计列；第一列和第二列为列合计内容，第三列为 第二列合计内容 / 第一列合计内容。
element el-table 表尾
10-19
element el-table 表尾是指表格的底部区域，通常用于显示表格数据的汇总信息或者操作按钮等。在引用中，第一个方法解决了当表格出现横向滚动条时，合并栏在滚动条下方的问题。第二个引用展示了一个 el-table 表格的示例代码，其中使用了 show-summary 属性来显示表格的汇总信息。第三个引用中的 js 部分则是对表格底部区域进行操作的代码，通过监听 footerRight 数据的变化，动态修改表格底部区域的内容。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值