美文网首页
avue elementUI table 求和/平均数

avue elementUI table 求和/平均数

作者: 鹿简luz | 来源:发表于2022-11-06 10:29 被阅读0次

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

    <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

    相关文章

      网友评论

          本文标题:avue elementUI table 求和/平均数

          本文链接:https://www.haomeiwen.com/subject/bdybtdtx.html