avue中自定义summaryMethod的合计功能

直接上代码！

<template>
    <div>
      <avue-crud
      :option="option"
      :data="avueData"
      ref="crud"
      :summary-method="summaryMethod"
      v-model="form">
      </avue-crud>
    </div>
</template>

<script>
  export default {
    props: {
      dailyReportData: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        avueData: [],//表格数据
        form: {},
        option: {
          labelWidth: 110,
          stripe: true,
          height: '600',
          menu: false,
          addBtn: false,
          columnBtn: false,
          excelBtn: true,
          tip: false,
          border: true,
          refreshBtn: false,
          index: true,
          showSummary: true, //开启合计功能
          column: [{
              label: "科目编码",
              prop: 'subjectCode',
            },
            {
              label: "科目名称",
              prop: 'subjectName',
            },

            {
              label: '上日余额',
              align: 'center',
              children: [{
                  label: '借方金额',
                  align: 'center',
                  prop: 'lastBorrowBalance',
                },
                {
                  label: "贷方金额",
                  align: 'center',
                  prop: 'lastLenderBalance',
                },
              ]
            },

            {
              label: '本日发生额',
              align: 'center',
              children: [{
                  label: '借方金额',
                  align: 'center',
                  prop: 'todayBorrowBalance',
                },
                {
                  label: "贷方金额",
                  align: 'center',
                  prop: 'todayLenderBalance',
                },
              ]
            },

            {
              label: '本日余额',
              align: 'center',
              children: [{
                  label: '借方金额',
                  align: 'center',
                  prop: 'endBorrowBalance',
                },
                {
                  label: "贷方金额",
                  align: 'center',
                  prop: 'endLenderBalance',
                },
              ]
            },
            {
              label: "借方笔数",
              prop: 'borrowCounts',
            },
            {
              label: "贷方笔数",
              prop: 'lenderCounts',
            },
          ]
        }
      }
    },

    created() {
      this.getAvueData();
    },
    watch: {
      dailyReportData: {   //监听父组件值的变化，更新子组件值
        immediate: true,
        deep: true,
        handler(newVal) {
          this.avueData = [...newVal]; // 更新表格数据
        }
      },
    },
    methods: {
      // 合计
      summaryMethod({ columns, data }) {
            const sums = [];
            if (columns.length > 0) {
              columns.forEach((column, index) => {
                if ([0].includes(index)) {
                  sums[index] = '合计'
                } else if (['subjectCode', 'subjectName'].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表格的数据
      getAvueData() {
        // 如果显示无效金额"-1",则设置为 0
        this.avueData = this.dailyReportData.map(item => {
          Object.keys(item).forEach(key => {
            if (item[key] === -1) {
              item[key] = 0;
            }
          });
          return item; // 返回修改后的对象
        });
      },
    }
  }
</script>
<style>
  .el-table__body .el-table__row.hover-row td {
    background-color: #f7f7de !important;
  }
</style>

数据是父组件传过来哒，下面看运行结果：

只需三步：

1. 配置summaryMethod
2. option中配置showSummary为true
3. 编写合计逻辑（见上述代码~）

好啦！有不对的地方还请多多指教！