avue 统计合计动态赋值

迷南。 2022-10-06 03:54 6阅读 0赞

添加完相关方法配置：

![输入图片说明][cf2f9d07dc9fb255d1b2a2ece62d70a4.png]

summaryMethod({ columns, data }) {
          const sums = [];
          if (columns.length > 0) {
            columns.forEach((column, index) => {
              if ([0].includes(index)) {
                sums[index] = '合计'
              } else if (['deptName', 'mrSectNo', 'mrSectName', 'operReader', 'mrPeriod',].includes(column.property)) {//过滤某些字段不参与计算
                sums[index] = '-'
              } else {
                let values = data.map(item => Number(item[column.property]));
                if (!values.every((value) => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr)
                    if (!isNaN(value)) {
                      return prev + curr
                    } else {
                      return prev
                    }
                  }, 0);
                }
    
              }
            });
          }
          return sums;
        },

完整代码如下：

<avue-crud :option="option" :data="data" :summary-method="summaryMethod" @selection-change="selectionChange"></avue-crud>
    
    
    
    export default {
      data(){
        return {
           selectList:[],
           data:[
             {
              sum: 5,
              avg: 10,
              count: 2,
             },{
              sum: 15,
              avg: 20,
              count: 1,
             }
           ],
           option:{
              index:true,
              showSummary: true,
              column: [
              {
                label: '单位名称',
                prop: 'deptName',
                hide: false
                // 分公司
              },
              {
                label: '表册编号',
                prop: 'mrSectNo',
                hide: false
                // 供水单位
              },
              {
                label: '表册名称',
                prop: 'mrSectName',
                hide: false
                // 供水单位
              },
              {
                label: '抄表人员',
                prop: 'operReader',
                hide: false
                // 供水单位
              },
              {
                label: '抄表周期',
                prop: 'mrPeriod',
                dicUrl: "/api/blade-system/dict-biz/dictionary?code=mr_period",
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
                // 供水单位
              },
              {
                label: '在线用户数',
                prop: 'onLineConsNum',
              },
              {
                label: '用水性质',
                children: [
                  {
                    label: '居民',
                    prop: 'residentNum',
                  }, {
                    label: '工业',
                    prop: 'industryNum',
                  }, {
                    label: '商业',
                    prop: 'businessNum',
                  }, {
                    label: '公福',
                    prop: 'gongFuNum',
                  },]
              }, {
                label: '暂停用户数',
                prop: 'suspendNum',
              },
              {
                label: '销户用户数',
                prop: 'cancellationNum'
              }],
           }
        }
      },
      methods:{
        selectionChange(list){
          this.selectList=list;
        },
        summaryMethod({ columns, data }) {
          const sums = [];
          if (columns.length > 0) {
            columns.forEach((column, index) => {
              if ([0].includes(index)) {
                sums[index] = '合计'
              } else if (['deptName', 'mrSectNo', 'mrSectName', 'operReader', 'mrPeriod',].includes(column.property)) {//过滤某些字段不参与计算
                sums[index] = '-'
              } else {
                let values = data.map(item => Number(item[column.property]));
                if (!values.every((value) => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr)
                    if (!isNaN(value)) {
                      return prev + curr
                    } else {
                      return prev
                    }
                  }, 0);
                }
    
              }
            });
          }
          return sums;
        },
      }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70][]

[cf2f9d07dc9fb255d1b2a2ece62d70a4.png]: /images/20221005/9f96b8d3746048aa878226751d5bb1e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70]: /images/20221005/bbd5d9b60ca24fad9d9395af25007dcb.png