el-table表尾合计行,自定义计算方式

需求:末尾最后一行显示总计人数,其中最后一列是出勤率,需要自定义计算方式: 出勤人数/实到人数*100

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

效果

<el-table
              ref="crud"
              class="check-all-hide"
              :data="statisticsList"
              border
              :max-height="mainHeight - 300"
              show-summary
              :summary-method="getSummaries"
            >
              <el-table-column prop="attenceName" label="班次名称" align="center"></el-table-column>
              <el-table-column prop="should" label="应到人数" align="center"></el-table-column>
              <el-table-column prop="beOut" label="外出人数" align="center"></el-table-column>
              <el-table-column prop="real" label="实到人数" align="center"></el-table-column>
              <el-table-column prop="beLeave" label="请假人数" align="center"></el-table-column>
              <el-table-column prop="dummyDeck" label="缺卡人数" align="center"></el-table-column>
              <el-table-column prop="Attendance" label="出勤人数" align="center"></el-table-column>
              <el-table-column prop="rate" label="出勤率" align="center"></el-table-column>
            </el-table>

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

// 表尾合计行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "当日共计";
          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] = "";
        }
        if (index === 7) {
          var num = (sums[6] / sums[3]) * 100;
          if (!num == 0) {
            num = num.toFixed(2);
            sums[index] = num + "%";
          } else {
            sums[index] = "0";
          }
        }
      });
      return sums;
    },