avue elementUI table 求和/平均数

今天做表格的求和 / 均值 做个记录:

<avue-crud :option="option" :summary-method="summaryMethod"></avue-crud>

data() {
  return {
    option: {
        ......
        showSummary: true, //会在表格尾部展示合计行
      }
  }
}

methods: {
  // 自定义逻辑方法
  summaryMethod(param)  {
    const { columns, data } = param; // 这里可以看出,自定义函数会传入每一列,以及数据
    const sums = [];
    columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计';
    } else if (index >= 1) { // index>=1后的列进行求和               
    // 页面分别统计 处理
    const values = data.map(item => item[column.property]);
      if (!values.every(value => isNaN(value))) {
        // 求和计算方法
        // sums[index] = values.reduce((prev, curr) => {
        //  const value = curr;
        //  if (!isNaN(value)) {
        //      return parseFloat((prev + curr).toFixed(10));
        //  } else {
        //      return prev;
        //  }
        // }, 0);
                
            
        // 求均值计算方法
        let totalCount = 0; // 求平均数时的次数
        sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
                totalCount++;
                return prev + curr;
            } else {
                return prev;
            }
        }, 0);
        sums[index] = sums[index] / totalCount;
        sums[index] = sums[index].toFixed(2);


        } else {
          sums[index] = '--'; // 如果列的值有一项不是数字,就显示这个自定义内容
        }
      } else {
        sums[index] = '--'
      }
    });
    return sums; // 最后返回合计行的数据
  }
}



elementUI官网地址:点击此处https://element.eleme.cn/#/zh-CN/component/table
借鉴大神文章:点击此处https://blog.csdn.net/haosicx/article/details/117904087

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容