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表操作与查询功能详解

《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)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.