添加完相关方法配置:

输入图片说明

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;
    },
  }
}

Logo

前往低代码交流专区

更多推荐