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

效果：

需求：用户可以根据每个表格要显示的计算方法写不同的代码进行运算。

在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="numberId" />-->
      <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;
        }

参考：
官网
csdn