vue+element 表格实现自定义表格合计

1.添加 show-summary , :summary-method="getSummaries"

<el-table v-loading="loading" :data="checkoutBasicInfoList" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries">

2.在data中添加: columnsData:[], 多选框选中方法中进行赋值

// 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.checkoutBasicId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.columnsData = selection 
    },

3.进行汇总

//自定义汇总
    getSummaries(param){
      console.log("params:",param)
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        let values = []
        if (this.columnsData.length===0) {
          values = data.map(item => Number(item[column.property]));
        }else{
          values = this.columnsData.map(item => Number(item[column.property]));
        }
        // 对需要统计的列进行判断
        if (column.property === 'totalAmount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0).toFixed(2);
        }
      });
      return sums;
    }