element ui中 :summary-method=“getSummaries“的使用与注释

JS部分

getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {//只找第一列放合计
            sums[index] = '合计:';
            return;
          }
          const values = data.map(item => Number(item[column.property]));//把对应一列中的之全部取出,放到一个数组中
          if (!values.every(value => isNaN(value))) {//如果el-table-column中没有prop属性,这里的column.property是undefined,所以判断一下values数组是否为空
            sums[index] = values.reduce((prev, curr) => {
              console.log(prev, curr);
              const value = Number(curr);//将values中的每个值转换为number类型
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '元';
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
    }

Html部分

<el-table :data="goodsDate" show-summary :summary-method="getSummaries"  ref="" stripe size="small">
<el-table-column header-align="center" align="left" prop="goodsName" :show-overflow-tooltip="true" label="商品名称"></el-table-column>
         <el-table-column header-align="center" prop="goodsPrice" align="center" label="单价" width="150">
           <template slot-scope="scope">
             <span>¥{{scope.row.goodsPrice | MoneyFormat}}</span>
           </template>
         </el-table-column>
         <el-table-column header-align="center" prop="goodsNum" align="center" label="数量" width="150">
           <template slot-scope="scope">
             <span>{{scope.row.goodsNum}}</span>
           </template>
         </el-table-column>
         <el-table-column header-align="center" prop="goodsAllPrice" align="center" label="总价" width="150">
           <template slot-scope="scope">
             <span>¥{{scope.row.goodsAllPrice | MoneyFormat}}</span>
           </template>
         </el-table-column>
</el-table>

效果图:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值