一、效果

效果

二、table设置

  1. :summary-method=“getSummaries” (自定义的合计方法)
  2. show-summary (开启合计功能)
 <el-table :data="tableData"
      size="small"
      id="tableData"
      border
      :summary-method="getSummaries"
      show-summary
  >

三、自定义方法

getSummaries(param) {
   const { columns, data } = param;
   const sums = [];
   columns.forEach((column, index) => {
      if (index === 0) {
          sums[index] = '合计';
           return;
      }
      // 可以用index设置 因为项目会动态改变列 所以我用了name
      if (column.label == "到款额" || column.label == "开票额" || column.label == "去年同期开票额") {
         const 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);
              sums[index] = (sums[index]) + '元';
           } else {
               sums[index] = '';
         }
      }
      
   });
   return sums;
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐