若依配置教程（八）el-table表尾合计行，表单求和

逃离我推掉我的手 2024-03-27 11:19 45阅读 0赞

效果：  
![在这里插入图片描述][b560e13c55854d4087875c02fa08db0d.png_pic_center]  
需求：用户可以根据每个表格要显示的计算方法写不同的代码进行运算。

> 在el-table加上show-summary,表示显示末尾计算。  
> 自定义合计逻辑在el-table加:summary-method=“getSummaries”。  
> 最后在methods;里面定义getSummaries方法。

--------------------

**代码：**

<el-table
          v-loading="loading"
          :data="salaryList"
          show-summary
          :summary-method="getSummaries"
          @selection-change="handleSelectionChange"
    
        >
          <el-table-column type="selection" width="55" align="center" />
    
          <el-table-column label="用户姓名" align="center" prop="userName" />
    
          <el-table-column label="工资序号" align="center" prop="userId" />
    
          <el-table-column label="工资号" align="center" prop="salaryId" />
          <el-table-column label="基础保障工资" align="center" prop="basicSalary" />
          <el-table-column label="技术津贴" align="center" prop="technicalAllowance" />
          <el-table-column label="生活费补贴" align="center" prop="livingAllowance" />
          <el-table-column label="交通费补贴" align="center" prop="trafficAllowance" />
          <el-table-column label="误餐费补贴" align="center" prop="mealDelayAllowance" />
          <el-table-column label="卫生费" align="center" prop="healthFee" />
          <el-table-column label="图书补助费" align="center" prop="bookFee" />
          <el-table-column label="其他津贴" align="center" prop="otherAllowance" />
          <el-table-column label="夜班津贴" align="center" prop="nightAllowance" />
          <el-table-column label="综合绩效工资" align="center" prop="comprehensiveSalary" />
          <el-table-column label="增量绩效工资" align="center" prop="incrementalSalary" />
          <el-table-column label="单项奖1" align="center" prop="single1" />
          <el-table-column label="单项奖2" align="center" prop="single2" />
          <el-table-column label="单项奖3" align="center" prop="single3" />
          <el-table-column label="单项奖4" align="center" prop="single4" />
          <el-table-column label="单项奖5" align="center" prop="single5" />
          <el-table-column label="加班费" align="center" prop="overtimePay" />
          <el-table-column label="独生子女" align="center" prop="onlyChild" />
          <el-table-column label="应付工资" align="center" prop="accruedWages" />
          <el-table-column label="企业年金" align="center" prop="enterpriseAnnuity" />
          <el-table-column label="公积金" align="center" prop="accumulationFund" />
          <el-table-column label="养老保险" align="center" prop="oldInsurance" />
          <el-table-column label="失业保险" align="center" prop="unemploymentInsurance" />
          <el-table-column label="医疗保险" align="center" prop="medicalInsurance" />
          <el-table-column label="会费" align="center" prop="membershipFee" />
          <el-table-column label="个税" align="center" prop="personalTax" />
          <el-table-column label="扣款合计" align="center" prop="totalDeduction" />
          <el-table-column label="实付工资" align="center" prop="realPay" />
          <el-table-column label="新职工房补" align="center" prop="housingAllowance" />
     </el-table>

param表示的就是从后端获取动态渲染出的所有数据,data表示得是行,columns是列  
最后返回的是一个数组，这个数组中的各项就会显示在合计行的各列中,index表示每一列的索引,从0开始  
不自定义情况下第一列不进行数据求合操作，而是显示「合计」二字,可通过sum-text配置,自定义index=0

--------------------

在methods（）中添加方法：

// 求和
        getSummaries(param) {
        
          const {
         columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
        
            if (index === 0) {
        
              sums[index] = '总计';
              return;
            }
            if (index ===2) {
        
              sums[index] = 'N/A';
              return;
            }
            if (index ===3) {
        
              sums[index] = 'N/A';
              return;
            }
            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] += ' 元';
            } else {
        
              sums[index] = 'N/A';
            }
    
          });
          return sums;
        }
      }

其中，下列代码表示我的数据的前三列不进行求和运算：

if (index === 0) {
        
              sums[index] = '总计';
              return;
            }
            if (index ===2) {
        
              sums[index] = 'N/A';
              return;
            }
            if (index ===3) {
        
              sums[index] = 'N/A';
              return;
            }

参考：  
[官网][Link 1]  
[csdn][]

[b560e13c55854d4087875c02fa08db0d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/68050466ac99498caf45c8cb7eb03bea.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/table#biao-wei-he-ji-xing
[csdn]: https://blog.csdn.net/T70H78/article/details/121039415