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

最新推荐文章于 2023-12-04 14:42:29 发布

原创最新推荐文章于 2023-12-04 14:42:29 发布 · 7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

这段代码展示了如何在HTML的el-table组件中利用JavaScript计算表格数据的汇总，并在表格下方显示合计行。通过遍历columns和data，对数值型列进行求和，对非数值型列显示'N/A'，最后将结果返回。模板插槽用于格式化单价和总价，显示带有货币符号的值。

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>

效果图：