mobaiyu
//表格列求和 

<el-table :summary-method="getSummaries" show-summary></el-table> 

getSummaries (param) {const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = \'合计\'
          return
        }
        if (index === 1) {
          sums[index] = \'/\'
          return
        }
        if (index === 2) {
          sums[index] = \'/\'
          return
        }
        if (index === 3) {
          sums[index] = \'/\'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === \'total\' || column.property === \'used\' || column.property === \'unused\') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index]
        }
      })
    this.sums = sums
   return sums
}

 注意:data中定义sums:[] 
<!-- 早餐统计 -->
<div class="statistics">
    <el-col style="text-align:left;margin:20px 30px 0;font-weight:700;" :span="24">早餐统计</el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[4]}}<br><b>总份数</b></el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[5]}}<br><b>已使用</b></el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[6]}}<br><b>未使用</b></el-col>
</div>
 

 

分类:

技术点:

相关文章:

  • 2021-12-25
  • 2022-12-23
  • 2021-12-04
  • 2021-12-30
  • 2021-09-29
  • 2021-08-22
猜你喜欢
  • 2022-01-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-13
相关资源
相似解决方案