将show-summary
设置为true
就会在表格尾部展示合计行。默认情况下,对于合计行,第一列不进行数据求合操作,而是显示「合计」二字(可通过sum-text
配置),其余列会将本列所有数值进行求合操作,并显示出来。当然,你也可以定义自己的合计逻辑。使用summary-method
并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中。
<el-table
:data="styleTableData"
style="width: 100%"
show-summary
:summary-method="getSummaries"
>
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column align="center" label="序号" type="index" width="50">
</el-table-column>
<el-table-column
align="center"
prop="date1"
label="组合名称"
width="180"
>
</el-table-column>
<el-table-column
align="center"
prop="name"
label="组合颜色"
width="180"
>
</el-table-column>
<el-table-column align="center" prop="address" label="尺码">
</el-table-column>
<el-table-column align="center" prop="style" label="款号">
</el-table-column>
<el-table-column align="center" label="数量" prop="numaaa">
<template slot-scope="scope">
<el-input
size="mini"
@input="styleInputEdit(scope.$index, scope.row)"
type="number"
v-model="scope.row.numaaa"
placeholder="数量"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="期望交期">
<template slot-scope="scope">
<el-date-picker
size="mini"
style="width: 100%; line-height: 28px"
align="center"
v-model="scope.row.date"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column width="80" align="center" label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="styleHandleEdit(scope.$index, scope.row)"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
getSummaries(param) {
// console.log("param", param);
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 5) {
sums[index] = "汇总";
return;
}
const values = data.map((item) => Number(item[column.property]));
console.log(values);
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);
sums[index] += "";
} else {
sums[index] = "";
}
});
return sums;
},
注意!!!
element官方文档里举例的方法const values = data.map((item) =>Number(item[column.property]));
要注意[column.property]
,要将计算合计的列加上prop
属性,否则合计无效
相加失精问题
if (!isNaN(value)) {
let d = 0; //定义小数位的初始长度,默认为整数,即小数位为0
let arr = curr;
if (arr.toString().split(".").length > 1) {
//判断数字是否为小数
//获取小数位的长度
var temp = arr.toString().split(".").length;
//比较此数的小数位与原小数位的长度,取小数位较长的存储到d中
d = d < temp ? temp : d;
}
//计算需要乘的数值
let m = Math.pow(10, d);
return (prev* m + curr * m) / m;
} else {
return prev;
}```