ElemntUI table表格中多选计算合计

最新推荐文章于 2023-07-21 16:17:21 发布
最新推荐文章于 2023-07-21 16:17:21 发布
阅读量805 收藏
点赞数
文章标签： elementui js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F15207710572/article/details/121833890
版权

表格里面的最下面会有一行合计，利用的element组件库原有的代码就可以实现，只不过会出现一个column.property，我不知道是什么东西，百度了也没有搜到，因而代码也没有实现其合计的功能，element里的代码如下

后面请求大佬帮忙，可以实现需要计算哪一列的合计就是显示在哪一列

 

index是第几列，item['amt']是所要计算的数据的字段，如此便可以计算出来。

只是不能动态变化，要想多选后得到合计值便不能使用此方法，因为多选是客户自己选择的，上述的合计只能计算表格所有数据的和，动态变化可以使用如下方法：

首先在表格中获取动态多选的值

最低0.47元/天 解锁文章
Alice啊呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element ui 表格内容 合计
Solitary的博客
02-14 1216
这里介绍的是如果表单内容需要 返回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.
关于table表格中的内容溢出布局方法
09-28
在网页设计中，表格（Table）是一种常用的布局方式，用于展示结构化数据。然而，当表格单元格（TD）中的内容过多时，可能会导致表格的布局混乱，甚至影响整体的视觉效果。为了解决这个问题，我们可以采用“内容溢出...
element表格多行合计
阿尔叭叭
06-25 3570
<el-table :data="tableData" border row-key="id" default-expand-all show-summary :summary-method="getSummaries" :tree-props="{ children: 'children' }" > .
Element 单元格合计（多行合计、合计列合并）
weixin_41897680的博客
12-14 7469
前言 基本内容自行查看官方文档，这里说一下比较特殊的需求。 合计行不显示 问题 最近做表格合计发现，合计行在页面初次加载时不会显示，但是窗口大小改变后，合计行正常显示。 解决 数据变化，触发组件的updated生命周期，对 Table 进行重新布局 <el-table　ref="tableRef"　show-summary　border> </el-table> updated () { 　　this.$nextTick(() => { 　　　　this.$refs.tabl
vue elementUI 关于表格的多选总结
我的博客
08-13 5188
前提：在做后台管理系统时，有好多有关表格的操作都需要用到多选框，经常用的时elementUi,现在进行总结 示例图： 总结： 1.在列表第一列添加多选框，按照组件一步步来,multipleSelection中就是选中状态的数据 2.如果表格中有分页，需要在翻页的时候记住上一页面选中的数据 3.取消选中状态 （1）需要去掉某些行的选中状态（不是全部） 前提： 使用方法： this.$refs.multipleTable.toggleRowSelection(th
VUE element-ui之table表格勾选复选框动态合计某列的值
HanXiaoXi_yeal的博客
11-14 1637
实现步骤： 自定义数组对象合计方法： countTotal(arr, keyName) { let $total = 0 $total = arr.reduce(function(total, currentValue, currentIndex, arr) { return currentValue[keyName] ? (total + currentValue[keyName]) : total }, 0) return $total
elementUI中Table表格问题的解决方法
12-12
前言 element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。 在开发vue框架项目时，引入...打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我
layui.table表格渲染后判断checkbox多选控件是否可用
02-21
该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用，当然done下还可以做其他逻辑判定，附上源码，绝对可用。
AngularJS中table表格基本操作示例
10-19
主要介绍了AngularJS中table表格基本操作,涉及AngularJS针对table表格元素与属性的相关动态操作技巧,需要的朋友可以参考下
Element-ui 实现table的合计功能
weixin_30672019的博客
05-24 4191
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0的桌面端UI框架，其功能较为完善，根据其文档与demo学习，非常容易上手，但是我在使用其tabel组件时，发现我的功能 需求并不适用官网给出的demo，于是进行了修改。 　　需求描述：只将数量列进行合计，其他行不用合计 出现问题：公众号列出现并不想出现的合计数 　　 根据官网的d...
UI组件--element-ui--Table组件自定义合计行
weixin_34217711的博客
02-21 2162
需求: Element-ui的Table组件自带合计行, 但是需求需要在合计行的某些单元格有特别的样式以及事件, 没有研究出怎么在既有合计行上完成此需求, 于是利用其原本的一些属性完成自定义合计行. 分析: 在Table组件中是有columns(包含所有列的数据的数组)的, 但是只有在summary-method事件中才暴露出来, 用来自定义合计行, 可以利用此事件来获得columns, 但是又...
Element表格数据合计的实现，简单易懂。
qq_51930729的博客
05-07 970
表格合计实现,直接上代码!
vue element el-table组件，当合并行（span-method）和多选一起使用时，可能会出现实际选中的行不是自己能看见的预想的行
html_tangkai的博客
09-08 1937
先看两个图 图1：为什么下面都没选，上面全选框是半选状态操作步骤： 1.点全选 2.手动取消这两行的勾选 图2：为什么下面都选了，上面全选框也是半选状态 操作步骤： 1.手动勾选这两行 如上图所示，el-table组件合并行和多选一起使用，可能会出现实际选中的行不是自己能看见的预期的行，从而导致一些BUG 图1原因分析： 这里赋值给table的数据是一个有三个对像数组，然后有两行合成了一行，当点全选时，会选中这三行的数据（虽然页面上只显示了两行），然后我手动把两个都取消勾选，但实际上还是有一行数据处于选中状
[element-ui]笔记：el-table开启合计后，计算合计列
m0_74101213的博客
07-11 2645
el-table开启合计后，计算合计列；第一列和第二列为列合计内容，第三列为 第二列合计内容 / 第一列合计内容。
element-ui table合计行不显示问题
weixin_42612454的博客
04-26 3244
问题描述：在开发的时候，合计行的显示，时有时没有，不是很稳定。通过谷歌浏览器调试时发现summary-.method)所指定的方法已经被调用了，把开发者工具关闭后，能看到合计行出现了，但刷新页面后，合计行再次消失。事实上，并非是合计行的方法未能调用成功，当尝试缩放页面后，合计行就会出现，这是由于ElementU:未将合计行放于Table数据行中，导致合计行处于Table的最低端，且在表格数据行所在整个区域的外部。 解决方案：在table所在页面加上样式： .el-table { overflo
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
暂时还没想好博客简介
12-06 3271
vue element el-table 表格勾选获取几列数据求和el-table表格勾选求和el-table表格某一列求和
Vue使用ElementUI对table的指定列进行合算
见证自己学习,成长的记录
03-06 8939
最近有一个想法，就是记录自己花销的时候，table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。然后我就顺着elementui的table组件寻找相关的demo，还真发现了一个这样的demo。对于这个demo，官方是这么描述的：将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。
element UI 表格实现 表尾合计行 ——小肉包
小肉包的博客
07-27 6065
element UI 表格实现 表尾合计行 可以根据需要计算任意列的合计，效果图如下 说明：
ElementUI el-table 的自定义合计行及自定义合并单元格
m0_68964998的博客
07-21 1654
这里我表格使用了heigth="63vh",固定了高度，开启合并行的时候合并行没有显示出来，需要给表格加上 ref="table'，再在生命周期update函数里加上以下代码。
element ui el-table中多选
最新发布
08-30
在 Element UI 的 el-table 中实现多选功能，你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码： ```vue <template> <el-table :data="tableData" :selection="selection" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> <el-table-column prop="address" label="Address"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, address: '1234 Street' }, { name: 'Jane', age: 25, address: '5678 Street' }, { name: 'Tom', age: 30, address: '9876 Street' }, { name: 'Alice', age: 35, address: '5432 Street' } ], selection: [] }; }, methods: { handleSelectionChange(selection) { this.selection = selection; } } }; </script> ``` 在上述代码中，我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后，我们使用 selection 属性绑定一个空数组，并通过 @selection-change 监听选择变化事件，在方法中更新 selection 数组的值。 这样，你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时，selection 数组会随之更新。你可以根据需要进一步处理选择的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值