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')
    }
}

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

相关文章
|
15天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
13 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
10天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
23天前
|
JavaScript
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
14 0
|
15天前
|
JavaScript
UI库的按需加载(vue的问题)
UI库的按需加载(vue的问题)
12 0
|
28天前
|
JavaScript 数据库
vue使用element ui实现下拉列表分页的功能!!!
vue使用element ui实现下拉列表分页的功能!!!
17 0
|
30天前
|
存储 JavaScript 定位技术
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
27 0
|
1月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
23 1
|
JavaScript 索引
vue——element-ui中的表格和分页器连接起来
vue——element-ui中的表格和分页器连接起来
411 0
|
7天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
34 3
|
2天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0