table的合計功能
需求:計算表格中最後一列的總和,其他數字列不進行計算。
官網中的示例是所有數字列都進行計算總和的。所以需要自己處理。
參考官網知識點:
summary-method
自定義的合計計算方法 Function({ columns, data })
實現代碼如下:
給table添加:summary-method="getSummaries"
<el-table ref="table" size="small" :data="shopList" fit show-summary :summary-method="getSummaries">
<el-table-column label="項目" align="center" prop="proName"></el-table-column>
<el-table-column label="單筆(元)" align="center" prop="perMoney"></el-table-column>
<el-table-column label="數量" align="center" prop="num"></el-table-column>
<el-table-column label="合計(元)" align="center" prop="total"></el-table-column>
</el-table>
對應的函數如下:
getSummaries(param) {
//此處打印param可以看到有兩項,一項是columns,一項是data,最後一列可以通過columns.length獲取到。
const { columns, data } = param
const len = columns.length
const sums = []
columns.forEach((column, index) => {
//如果是第一列,則最後一行展示爲“總計”兩個字
if (index === 0) {
sums[index] = '總計'
//如果是最後一列,索引爲列數-1,則顯示計算總和
} else if (index === len - 1) {
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
} else {
sums[index] = 'N/A'
}
//如果是除了第一列和最後一列的其他列,則顯示爲空
} else {
sums[index] = ''
}
})
return sums
}