vue element-ui table表格自定义纵向合计横向合计
vue element-ui table表格自定义纵向合计横向合计,以及动态表格自定义合计列最后一个总合计不显示问题
·
1表格横向数据合计
表格代码
<el-table-column prop="" label="合计">
<template slot-scope="scope">
<div>
{{ total[scope.$index] }}
</div>
</template>
</el-table-column>
js代码
我是拿到每一行数据,留下自己想合计的数据进行·求和
let totalNum = []
//拿到数组想要的数值进行合计
res.data.tableData.forEach(item => {
let newArr = []
for (let k in item) {
if (k !== 'bodyId') {
newArr.push(item[k])
}
}
var values = newArr.map(Number)
//删除NaN值
values = values.delNaN()
totalNum.push((eval(values.join("+"))).toFixed(2));
})
this.total = [...totalNum];
到这里横向自定义合计就完成了,下面是自定义合计行。
后端在列表里面每一个种类已经返回了一个小的合计,我需要求每个小合计的总合计
总合计合计行并没有计算自定义合计列
代码
getSummers(param) {
const { columns, data } = param;//这里可以看出,自定义函数会传入每一列,以及数据
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总合计';
return;
} else if (index >= 2) { //index>=2后的列进行求和
//页面分别统计 处理
let totalArr = []
// 只统计小合计所有数据
data.map(item => {
if (item['科室单元名称'].slice(-2) == '合计') {
totalArr.push(item)
}
})
const values = totalArr.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);
//此处结合了方式一的判断处理,实现多种条件处理
//此处的column.property获取的值对应<el-table-column>中prop对应的字段
switch (column.property) {
case "total1":
case "total2":
case "total3":
return sums[index] = parseFloat(sums[index]).toFixed(2);
break;
}
} else {
sums[index] = ''; //如果列的值有一项不是数字,就显示这个自定义内容
}
} else {
sums[index] = '--'
}
});
// 自定义表头纵向合计最后一个总合计
//数组字符串转数组number类型
let vals = sums.map(Number);
//删除NaN
vals = vals.delNaN();
const a = eval(vals.join("+"))
//替换最后一位
sums.splice(sums.length - 1, 1, a);
// 保留小数点后两位
sums.forEach((item, index) => {
if (typeof item === 'number') {
sums[index] = item.toFixed(2)
}
})
return sums;//最后返回合计行的数据
},
我们自己拿到返回的sums进行相加在替换掉最后一个。
本人是个菜鸟,有写的不对,不合理的地方请多多指教。
更多推荐
已为社区贡献1条内容
所有评论(0)