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

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

相关文章
|
14天前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
|
1月前
|
资源调度 JavaScript 前端开发
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
|
17天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的宝鸡文理学院学生成绩动态追踪系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的宝鸡文理学院学生成绩动态追踪系统附带文章和源代码部署视频讲解等
15 0
|
1月前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
27 1
|
1月前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
96 1
|
1月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
49 2
|
1月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
83 1
|
1月前
|
JavaScript 前端开发
【vue】设计一个表格,增删改查,分页,固定列,特殊字符校验
【vue】设计一个表格,增删改查,分页,固定列,特殊字符校验
20 0
【vue】设计一个表格,增删改查,分页,固定列,特殊字符校验
|
1月前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6