element中使用show-summary进行汇总时小数点的问题解决方法

gys9895

已于 2022-06-29 17:08:32 修改

阅读量893

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-29 16:54:27 首次发布

本文链接：https://blog.csdn.net/gys9895/article/details/125525362

版权

vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

自带的合计是只要在 el-table 加入 show-summary ，
然后每个el-table-column需要统计的列加入 prop

步骤1：首先在 el-table 加入 :summary-method=“getSummaries” 如下：

<el-table
  ref="bodyTable"
  :data="bodyTable"
  tooltip-effect="dark"
  style="width: 100%"
  height="250"
  border
  show-summary
  :summary-method="getSummaries"
>

此处主要代码都是用 element的原getSummaries的代码的，
步骤2：在methods自定义一个getSummaries，代码如下：

//自定义合计行

  getSummaries(param){
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "合计";
        return;
      }
      switch(column.property) {  // column.property可以匹配它的每一列的命名， 然后赋值
        case "money": //列名
        //  if (column.property !== undefined) {
            //加了prop属性的el-table-column 才能找到column.property
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr; //多行相加
                } else {
                  return prev;
                }
              }, 0);
            } else {
              sums[index] = "";
            }
            sums[index] = sums[index].toFixed(2); //保留2位小数
        //  }
          break;
        default:
          break;
      }
    });

    return sums;
  },

特殊点 1是在column.property !== undefined 才做合计，以免过多报错。

2是在最后加上toFixed(2) 保留2位小数

有了自定义的方法，如果有其他合计的特殊要求都可以自己满足。