实现elemen-ui的最后一行合计功能

el-table标签

与官网的例子操作一样即可
1.无特殊需求的，全部列都求和的，如下效果：

//在el-table添加以下这个属性即可
show-summary

2.只合计其中几列，如下效果：

//在el-table添加以下两个属性，以及对应回调
:summary-method="getSummaries" show-summary

//处理方法
getSummaries(param) {
      const { columns, data } = param;
      // 过滤需要合计的prop
      const property = ['amountInYear','remainingAmount'];
      const sums = [];
      columns.forEach((column, index) => {
         if (index === 0) {
          sums[index] = '合计';
          return;
        }
        //data为表格中的所有数据
        const values = data.map(item => Number(item[column.property]));
        //这里判断过滤
        if (!values.every(value => isNaN(value)) && property.includes(column.property)) {
          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] = '';
        }
      });
      //返回一个数组，数组的每一个元素对应着最后一行每一列的值
      return sums;
    }

PlTable标签

PlTable用于解决表格数据量大，导致加载卡顿的问题，使用方法与el-table几乎一致。
PlTable标签的合计功能与el-table标签的实现方法差不多，只是处理方法的返回值需要特殊处理。
PlTable标签的使用

//安装插件
npm i pl-table
//在页面引入
import { PlTable, PlTableColumn, PlxTableGrid, PlxTableColumn } from 'pl-table';
//注册组件
components:{PlTableColumn,PlTable}
//必须使用use-virtual属性，并且必须定义行高 :row-height="20"
<PlTable ref="table" stripe v-loading="loading" :datas="tableData" highlight-current-row :row-height="20" use-virtual style="width: 100%">
    <PlTableColumn prop="id" width="90" label="编号">
    </PlTableColumn>
</PlTable>

1.无特殊需求的，全部列都求和的，与el-table实现方式一样
2.只合计其中几列，并且只合计已勾选的行，如下效果：

//添加属性
:summary-method="getSummaries" show-summary

getSummaries(param) {
        const { columns, data } = param;
      // 过滤只合计的prop
        const property = ['amountInYear','remainingAmount','amountByCumulative','amountInMonth'];
        const sums = [];
        columns.forEach((column, index) => {
           if (index === 0) {
            sums[index] = '合计';
            return;
          }
          //存在已勾选的，才处理
          if(this.multipleSelection.length>0){
          //this.multipleSelection是已勾选的数组数据
            const values = this.multipleSelection.map(item => Number(item[column.property]));
            //判断
            if (!values.every(value => isNaN(value)) && property.includes(column.property)) {
              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] = '';
          }
        });
        //只返回只有一个元素的数组，如果返回多个元素，就会产生多行
        const res = [sums]
        return res;
      }

未勾选的状态

已勾选的状态