//表格列求和
<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>
知识兔