element table只计算最后一列数据总和

需求:element table只计算表格中最后一列的总和
官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。

1、HTML

<el-table 
        border
        show-summary 
        :summary-method="getSummaries"
        :formatter="formatter"  
        :default-sort = "{prop: 'projectName', order: 'descending'}" 
        :data="performanceList"
>
        <el-table-column sortable type="index"  label="序号" align="center" width="50" />
        <el-table-column  prop="projectName" label="项目名称" align="center" />
        <el-table-column sortable prop="originalPrice"  label="项目金额" align="center" />
        <el-table-column sortable prop="deductRatio" label="折扣 %" align="center" />
        <el-table-column prop="planName" label="划扣方案" align="center" />
        <el-table-column prop="stepName" label="划扣步骤名称" align="center" />
        <el-table-column sortable prop="stepRatio" label="划扣步骤比例 %" align="center" />
        <el-table-column sortable prop="deductExecutionDate" label="项目划扣执行时间" align="center" />
        <el-table-column sortable prop="deductAmount" label="划扣金额" align="center" />
        </el-table>

2、JS 此处方法无需修改、通用的、拿来即用

getSummaries(param) {
//此处打印param可以看到有两项,一项是columns,一项是data,最后一列可以通过columns.length获取到。
  const { columns, data } = param
  const len = columns.length
  const sums = []
  columns.forEach((column, index) => {
  //如果是第一列,则最后一行展示为“总计”两个字
    if (index === 0) {
      sums[index] = '总计'
      //如果是最后一列,索引为列数-1,则显示计算总和
    } else if (index === len - 1) {
      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
  }

3、效果图
element table只计算最后一列数据总和
完美撒花!!!!!!!

上一篇:2021-01-07


下一篇:力扣---2020.9.12