vue+elementUI表格的表尾合计(前端显示后台封装成对象视图层的数据合计详解)

看效果

上重要代码

 <el-table
        :data="items"
        @row-click="rowclick"
        highlight-current-row
        :max-height="maxHeight"
        :header-cell-style="{'text-align':'center'}"
        show-summary
        :summary-method="getSummaries"
      >

show-summary是在表尾增加合计；

 :summary-method="getSummaries"是自定义合计函数；

 <el-table-column label="报表审核具体情况">
          <template slot-scope="scope">{{ scope.row.fytjxxbqj.bbshjtqk }}</template>
        </el-table-column>
        <el-table-column label="驻粤人数" prop="zyrs">
          <template slot-scope="scope">{{ scope.row.fytjxxbqj.zyrs }}</template>
        </el-table-column>
        <el-table-column label="驻湘人数" prop="zxrs">
          <template slot-scope="scope">{{ scope.row.fytjxxbqj.zxrs }}</template>
        </el-table-column>

对于需要合计的列，需要加prop列属性。由于我后端封装的视图层对象里面包含对象，所以前端显示数据是这样子的：{{ scope.row.fytjxxbqj.zyrs }}，fytjxxbqj是后端的一个对象，但是列prop属性只需要写成对象里面的属性（后面合计需要用到）

js的合计函数：

getSummaries(param) {
      const { columns, data } = param;//这里可以看出，自定义函数会传入每一列，以及数据
      const sums = [];
      columns.forEach((column, index) => {//遍历每一列
        if (index === 0) {
          sums[index] = "合计";//第一列显示 合计
          return;
        }
        if (index >= 12) {//这里是从索引12开始合计，前面的不合计
          const values = data.map(item =>//遍历每一行数据，得到相应列的所有数据形成一个新数组
            Number(item.fytjxxbqj[column.property])//由于我后端封装成对象，item.fytjxxbqj是获得每一行数据fytjxxbqj对象,然后通过[column.property]列属性获得对象相应属性的值，所以上面prop的值就设置成对象里面的属性。如果不是对象的直接item[column.property]获得相应的值，记得prop要设置
          );
          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] = "";//如果列的值有一项不是数字，就显示这个自定义内容
          }
        } else {
          sums[index] = "";//索引12之前的列显示这个自定义内容
        }
      });

      return sums;//最后返回合计行的数据
    }

以上就是全部内容，记得需要合计的列加上prop属性。