Vue 项目购物车中 使用ElementUI Table 组件对列求和

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;
      },
  };

console.log的参考

三.总结

ElementUI Table组件的效果非常不错 , 但是使用起来要对单元格和内部的操作都要依靠它内置的函数来执行, 本文对他提供的一种自定义列表内容的方案进行修改,解决了每列数据求和困难的问题,并对组件使用提供了一些思路, 希望对各位有用.