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

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

相关文章
|
8天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
5月前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
303 5
Vue使用element中table组件实现单选一行
|
5月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
5月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
4月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
61 0
|
6月前
|
JavaScript 索引
炸裂!Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能,太丝滑了!
炸裂!Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能,太丝滑了!
|
6月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
192 0
Vue3表格(Table)
|
7月前
|
存储 开发框架 前端开发
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
|
6月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
346 0
|
6月前
|
JavaScript
Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)
这篇文章展示了如何在Vue中实现任务添加、删除、勾选和统计功能,通过组件间参数传递和方法实现,提供了App.vue、TheList.vue、TheItem.vue、TheHeader.vue和TheFooter.vue组件的主要代码示例。

热门文章

最新文章