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 === ) {

          sums[index] = '合计'

          return

        }

        if (index === ) {

          sums[index] = '/'

          return

        }

        if (index === ) {

          sums[index] = '/'

          return

        }

        if (index === ) {

          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

            }

          }, )

          // 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="">早餐统计</el-col>

    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>总份数</b></el-col>

    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>已使用</b></el-col>

    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>未使用</b></el-col>

</div>