动态创建elementUI表格合计行

淡淡的烟草味﹌ 2022-12-25 09:59 311阅读 0赞

elementui加上合计行非常简单，在表格组件上，将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑，使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。

<el-table ref="table" show-summary :summary-method="summaryMethod">

// 合计行
    summaryMethod(param) { 
       let that = this;
       const {  columns, data } = param;
       const sums = [];
       let arr = []; //合计行数组
       columns.forEach((column, index) => { 
         //处理合计行数组
         //that.summaryList是表格需要进行合计行的具体字段
         that.summaryList.forEach(item => { 
           if (column.property == item) arr.push(`${ item}`);
         });
    
         if (index === 0) { 
           sums[index] = "合计";
           return;
         }
         //that.$util.delcommafy将值转化成number类型，方便做计算
         const values = data.map(
           item => that.$util.delcommafy(item[column.property]) * 1
         );
         if (arr.includes(column.property)) { 
           sums[index] = values.reduce((prev, curr) => { 
             const value = Number(curr);
             if (!isNaN(value)) { 
               return prev + curr;
             } else { 
               return prev;
             }
           }, 0);
           //金额字段数组
           that.amountList.map(stuff => { 
             // 加上金额千位分隔符
             if (column.property == stuff){ 
               sums[index] = that.$util.fmtMoney(sums[index], 2);
             }
           });
         } else { 
           sums[index] = "--";
         }
       });
       return sums;
     },