vue+element中table列表最后一行添加合计

1.在table中添加 show-summary属性,并设置值为 true,使用 summary-method 并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中,如下代码

<el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary = "true"
    style="width: 100%; margin-top: 20px">

2.getSummaries方法逻辑

getSummaries(param,callback) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
       /* const tempArr = ['ql', 'price', 'je','hjql','hjje','xj']//给需要的列加求和计算
        if (tempArr.includes(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);
            sums[index] += '';
          } else {
            sums[index] = '--';
          }
       /* }*/
        /*console.log('**sums[7]****',sums[7])*/
        if(sums[index] !=null && sums[index] != undefined && sums[index] != '--'){
          this.$nextTick(function(){
            this.bcyjje = sums[7] + sums[10]
            this.zxcz = this.bcyjje - this.dqye
          })
        }else {
          sums[index] = 0
        }

        return sums;
      });
      callback(sums)
    },

注:如果最后只显示合计行,并不显示数据,一定要加callback,即可解决此问题

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值