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

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

相关文章
|
23天前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
28 5
|
15天前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
41 0
|
23天前
|
JavaScript BI UED
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
17 0
|
23天前
|
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)
16 0
|
JavaScript 前端开发 开发者
Vue UI 组件库
随着SPA、前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本。
4201 0
|
3天前
|
缓存 JavaScript 算法
|
1天前
|
JavaScript
vue知识点
vue知识点
8 2
|
7天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
14天前
|
JavaScript
|
16天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
33 6