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

最新推荐文章于 2024-03-22 09:44:13 发布

米咪米

最新推荐文章于 2024-03-22 09:44:13 发布

阅读量618

点赞数

分类专栏： Vue.js JavaScript 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_52063946/article/details/134943670

版权

Vue.js 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

JavaScript

17 篇文章 2 订阅

订阅专栏

一、合计

<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.prop
        if (['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.prop
        if (!['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].areaLevel
        sums['areaName'] = '小计'
      })
      return sums
    },

效果图：