vue表格之:summary-method="getSummaries"与show-summary(列求和)

//表格列求和 

<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>
 

 

posted @ 2019-09-18 14:29  _0123456789  阅读(8789)  评论(0编辑  收藏  举报