VUE element-ui之table表格勾选复选框动态合计某列的值

简介: VUE element-ui之table表格勾选复选框动态合计某列的值

实现步骤:
自定义数组对象合计方法:

countTotal(arr, keyName) {
      let $total = 0
      $total = arr.reduce(function(total, currentValue, currentIndex, arr) {
        return currentValue[keyName] ? (total + currentValue[keyName]) : total
      }, 0)
      return $total
    }

勾选复选框时,调用合计方法即可:

selectionChangeHandler(val) {
    if (val.length !== 0) {
        this.totalNumer = this.countTotal(val, 'shipped')
    }
}

效果:
在这里插入图片描述

相关文章
|
13天前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
34 6
|
11天前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
16 1
|
11天前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
8 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
11天前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
8 0
|
11天前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
10 0
|
11天前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
16 0
|
11天前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
12 0
|
11天前
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
23 0
|
14天前
Element UI 表格数据格式化
Element UI 表格数据格式化
11 0
|
14天前
|
存储 JavaScript 容器
Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
12 0