Vue 项目中 ElementUI 使用 Table 组件 , 列求和问题傻瓜指南 !!

一.目标

使用ElementUI的Table组件, 通过内置的summary-method传入一个方法来完成金额的求和.

实现成果

二.步骤

1.在Table组件的 `<el-table>` 标签内加入属性 show-summary 和 :summary-method=“getSummaries”’

	<el-table ref="multipleTable" :data="dataList" 
		show-summary :summary-method="getSummaries" 
     <el-table-column>

2.在method中完成 getSummaries 函数

这是官网(ElementUI官方文档)的提供方案,通过这个方法可以在Table最后一行每列数据的求和结果,需要做一些更改才能使用, 要快速使用的伙伴可以继续向下看.

 methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            //想深入理解的伙伴建议通过输出以下值开始读代码
            // console.log('param', param);
            // console.log('sums',sums);
            // console.log('data',data);
            // console.log('column',column);
            return;
          }
           //通过给el-table-column设置prop获取属性对所属属性值转化为Nmuber格式
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
          //通过reduce求和,curr为每一列的每个列元素的值,返回值为sums[index]
            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';
          }
        });
        //返回所有sums[index]的数组,组件内部会解析为最后一行的数据
        return sums;
      }
    }
  };

以下是我使用的方案

 methods: {
       getSummaries(param) {
       //解构赋值
       //columns:所有列的集合
       //data:你的原始数据  [{id:1,num:1,price:20},{id:2,num:1,price:20},{id:3,num:1,price:20}]
        const {
          columns,
          data
        } = param;
        //准备一个空的结果数组,用来存放每一列的和
        const sums = [];
        //设置最后一行的要设定的列值,这里有7列,选择第5,6列的位置
        columns.forEach((column, index) => {
          //价格总和的标题
          if (index === 5) {
            sums[index] = '商品金额:';
            // console.log('param', param);
            // console.log('sums',sums);
            // console.log('data',data);
            // console.log('column',column);
            return
          }
          //金额的计算   data里的num字段和price相乘
          if (index == 6) {
            const values = data.map(item => Number(item['num']));
            const price = data.map(item=>Number(item['price']))
       	    //通过reduce求和,curr为每一列的每个元素的值,return prev返回值给到sums[index]
            sums[index] = values.reduce((prev, curr, index) => {
              const value = Number(curr);
              //确定数据是否为空,不为空进行计算,为空返回原值
              if (!isNaN(value)) {
              	//curr为数量,price为单价,求得每行的金额,再通过reduce累加求和
                return prev + curr*price[index];
              } else {
                return prev;
              }
            }, 0);
          }
          //不是目标的列不添加任何内容
           else {
            	sums[index] = '';
          }
        });
        //返回所有sums[index]的数组,组件内部会把每一列结果的数组, 解析为最后一行的数据
        return sums;
      },
  };