项目场景:
提示:这里简述项目相关背景:
问题描述
提示:这里描述项目中遇到的问题:
例如:想要某列展示合计数值的
1、先在组件添加 :summary-method=“getSummaries” show-summary
使用summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中。
@Override
<el-table :summary-method="getSummaries" show-summary :data="list" >
2、自定义的合计计算方法 summary-method 判断条件中加上下标就是要显示列的位置。
getSummaries (param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
console.log(columns);
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value)) && index == 4 || index == 6 || index == 7 || index == 8 || index == 9 || index == 13) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = '';
}
});
return sums;
},
summary-method合计不生效:
el-table-column
中嵌套了input没有prop传参,只使用了scope.row中的值来进行绑定,导致合计计算不生效。
<el-table-column label="本次付金额" width="130">
<template slot="header"><span class="star">*</span>本次付金额</template>
<template slot-scope="scope">
<el-input @input="inputActualAmount($event,scope.row,scope.$index)" v-model="scope.row.thisPrice"
size="small" />
<div style="color:red" v-if="scope.row.showWring">支付金额过大!</div>
</template>
</el-table-column>
解决方案:
提示:这里填写该问题的具体解决方案:
在 el-table-column label=“本次付金额” prop=“thisPrice” width=“130”> 中加入prop
值。
<el-table-column label="本次付金额" prop="thisPrice" width="130">