Vue实战篇二十:自定义表格合计

本文介绍了如何利用Element-UI的表格组件实现数据合计功能。通过设置`show-summary`属性,可以轻松生成合计行。若需自定义合计计算,可使用`summary-method`方法,例如只对金额列进行合计。示例代码展示了如何实现这个功能,包括获取合计值和处理数据的逻辑。
摘要由CSDN通过智能技术生成

一、表格合计的自动生成
通过element-ui 表格组件的合计属性,即可自动生成合计行:
在这里插入图片描述

 <el-table ref="table" :data="orderDetail" stripe border show-summary  style="width: 100%; margin-top:20px">

        <el-table-column width="100px" prop="orderNo" label="订单号" />
        <el-table-column width="80px" prop="orderItem" label="订单行" />
        <el-table-column width="150px" prop="materialCode" label="物料编码" />
        <el-table-column :show-overflow-tooltip="true" prop="materialName" label="物料名称" />
        <el-table-column :show-overflow-tooltip="true" prop="materialModel" label="型号" />
        <el-table-column :show-overflow-tooltip="true" prop="materialStd" label="规格" />
        <el-table-column :show-overflow-tooltip="true" width="80px" prop="qty" label="数量">
        </el-table-column>
        <el-table-column width="50px" prop="currency" label="币别">
        </el-table-column>
        <el-table-column width="80px" prop="price" label="单价">
        </el-table-column>
        <el-table-column width="100px" prop="amount" label="金额">
        </el-table-column>

      </el-table>

在这里插入图片描述
二、表格合计的自定义方法
我们希望只对金额这一列生成合计值:
使用summary-method方法自定义合计计算方法

在这里插入图片描述

<el-table ref="table" :data="orderDetail" stripe border show-summary :summary-method="getSumAmount" style="width: 100%; margin-top:20px">

        <el-table-column width="100px" prop="orderNo" label="订单号" />
        <el-table-column width="80px" prop="orderItem" label="订单行" />
        <el-table-column width="150px" prop="materialCode" label="物料编码" />
        <el-table-column :show-overflow-tooltip="true" prop="materialName" label="物料名称" />
        <el-table-column :show-overflow-tooltip="true" prop="materialModel" label="型号" />
        <el-table-column :show-overflow-tooltip="true" prop="materialStd" label="规格" />
        <el-table-column :show-overflow-tooltip="true" width="80px" prop="qty" label="数量">
        </el-table-column>
        <el-table-column width="50px" prop="currency" label="币别">
        </el-table-column>
        <el-table-column width="80px" prop="price" label="单价">
        </el-table-column>
        <el-table-column width="100px" prop="amount" label="金额">
        </el-table-column>
      </el-table>

getSumAmount(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // 首列标题
        if (index === 0) {
          sums[index] = '合计:'
        // 只合计金额这一列
        } else if (index === 9) {
          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] = 'N/A'
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    }

在这里插入图片描述

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值