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

本文主要是介绍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表格自定义合计、小计功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---