欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

动态创建elementUI表格合计行

程序员文章站 2022-03-04 11:34:23
...

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