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

一、表格合计的自动生成
通过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
    }