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);//删除NaNvals = 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进行相加在替换掉最后一个。
本人是个菜鸟，有写的不对，不合理的地方请多多指教。
