Vue+Element-ui Table 列求和
Vue+Element-ui Table 列求和Vue代码求和getSummaries效果图Vue代码<el-table v-loading="loading" :data="standardList"@sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSe
·
Vue+Element-ui Table 列求和
- Vue代码
- 求和getSummaries
- 效果图
Vue代码
<el-table v-loading="loading" :data="standardList"
@sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSelectionChange">
这两个一定要加上 :summary-method=“getSummaries” show-summary,
show-summary 也必须加上,如果不加,底部不会显示;
getSummaries对应的计算的函数
求和getSummaries
把getSummaries放在 methods: {}里面即可
getSummaries(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
}
// index >= 3 || index <= 11 是你需要计算的列
// 当然也可以指定一个或者多个列
// index === 2 || index === 3 这样值求和第二个与第三个列
else if (index >= 3 && index <= 11) {
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 Math.floor((prev + curr) * 100) / 100;
} else {
// 保存了两位小数点
return Math.floor(prev * 100) / 100;
}
}, 0)
} else {
sums[index] = 'N/A'
}
} else {
sums[index] = ''
}
})
return sums
},
效果图
更多推荐
已为社区贡献2条内容
所有评论(0)