el-table的横纵向求和

横向求和

利用slot-scope=“scope"插槽的方式实现，scope有两个内置的参数
slot-scope=”{row,column}"

<el-table ref="table" v-loading="crud.loading" size="small" style="width: 100%;" border align="center" :data="buildData" :span-method="objectSpanMethod">
	<el-table-column prop="classTimeNum" label="课时数" />
	<el-table-column prop="sigleLessonFee" label="课时费" />
	<el-table-column prop="" label="计算">
	  <template slot-scope="scope"> 
	    {{ Number(scope.row.classTimeNum)+Number(scope.row.studentNum)}}
	  </template>
	</el-table-column>
</el-table>

纵向求和

纵向求和show-summary或者:summary-method=“getSummaries”

视图

<template>
	<el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
    ........
    </el-table>
 </template>

方法

 methods: {
   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] = 'N/A';
       }
     });

     return sums;
   }
 }