Vue表格自定义合计、小计功能

2023-12-13 22:20

本文主要是介绍Vue表格自定义合计、小计功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 一、合计

<template> 
<avue-crud:option="optiondata":table-loading="loading":data="testdata":page.sync="page":span-method="spanMethod"ref="cruddata"@current-change="currentChangedata"@size-change="sizeChangedata"@on-load="echaerinfo"></avue-crud></template><script>
export default {data() {return {// 表格的属性optiondata: {height: 'auto',calcHeight: 30,tip: false,searchShow: false,searchMenuSpan: 6,menu: false,border: true,// index: true,// indexLabel: '序号',viewBtn: false,addBtn: false,delBtn: false,editBtn: false,selection: false,header: false,column: [{label: '分区级别',prop: 'areaLevel',dicUrl: '/api/blade-system/dict-biz/dictionary?code=area_level',props: {label: 'dictValue',value: 'dictKey',},// formatter: (row) => {//   return row.areaLevel == 'first_level'//     ? '一级'//     : row.areaLevel == 'second_level'//     ? '二级'//     : '三级'// },},{label: '分区名称',prop: 'areaName',},{label: '供水量(m³)',prop: 'totalWaterSupply',value: 'all',},{label: '用水量(m³)',prop: 'totalWaterUse',},// {//   label: '售水量(m³)',//   prop: 'meteredWaterConsum',//   value: 'all',// },{label: '漏损水量(m³)',prop: 'leakWaterConsum',type: 'number',},{label: '漏损率(%)',prop: 'leakRatio',type: 'number',},{label: '漏损率同比',prop: 'yearOnYearDiff',type: 'number',},{label: '漏损率环比',prop: 'linkRelativeDiff',type: 'number',},],},testdata: [{areaLevel: 1,areaName: 'aaa11',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 1,areaName: 'aaa22',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 2,areaName: 'aaa33',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 2,areaName: 'aaa44',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 2,areaName: 'aaa55',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 2,areaName: 'aaa66',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 3,areaName: 'aaa77',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 3,areaName: 'aaa88',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 3,areaName: 'aaa99',leakRatio: 10,leakWaterConsum: 1,},{areaLevel: 3,areaName: 'aaa10',leakRatio: 10,leakWaterConsum: 1,},],}// 合计getSummary() {let sums = {} // 合计行// 遍历属性this.optiondata.column.forEach((item) => {let prop = item.propif (['areaLevel', 'areaName'].includes(prop)) {sums[prop] = ''} else {let values = this.testdata.map((ele) => Number(ele[prop] || 0)) // 将数组中同一 属性的值构成一个新的数组// 计算各个属性的值的总和sums[prop] =values.length > 0? values.reduce((a, b) => {return a + b}): 0}})this.testdata.push(sums) // 将总计行插入数组最后一行},}
</script>

效果图:

二、各分类小计

// 小计getSum() {let newArr = [] // 新数组let currentArr = [] // 临时数组(同一个分类的)let currentLevel = this.testdata[0].areaLevel // 根据属性为 'areaLevel' 进行分组this.testdata.forEach((item, i) => {if (item.areaLevel == currentLevel) {currentArr.push(item)} else {newArr = newArr.concat(currentArr)newArr.push(this.getPropSums(currentArr, i)) // 新增一行这个分类的小计currentArr = [] // 清空临时数组currentLevel = item.areaLevel // 更新当前的分类(areaLevel)currentArr.push(item)}})newArr = newArr.concat(currentArr) // 将最后一组分类 push 进来newArr.push(this.getPropSums(currentArr, this.testdata.length)) // 将最后一组分类的小计插入最后一行this.testdata = newArr},// 计算各个属性的小计getPropSums(currentArr, i) {let sums = {}this.optiondata.column.forEach((item) => {let prop = item.propif (!['areaLevel', 'areaName'].includes(prop)) {let values = currentArr.map((ele) => Number(ele[prop] || 0))sums[prop] =values.length > 0? values.reduce((a, b) => {return a + b}): 0}sums['areaLevel'] = this.testdata[i - 1].areaLevelsums['areaName'] = '小计'})return sums},

效果图:

这篇关于Vue表格自定义合计、小计功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/490158

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动