定义 table 求和方法
export function getSummariesByTableColumn(param, opt) {
opt.sumText ??= '合计'
opt.getColProperty ??= rawProp => rawProp
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums.push(opt.sumText)
return
}
if (!column.labelClassName?.includes('need-sum')) { // 不需要求和
sums.push('-')
return
}
const property = opt.getColProperty(column.property)
const values = data.map(item => Number(item[property]))
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
})
return sums
}
在 table 上使用
<el-table
...
show-summary
:summary-method="param => getSummariesByTableColumn(param)"
>
<el-table-column
...
label="损耗数量"
prop="count"
label-class-name="need-sum"
/>
...
</el-table>
这样就实现了一个比较通用 table
求和方法,不用当 table
需要求和时都要单独写一个 summary-method
方法,在内部在声明需要求和列的字段,进行求和运算。