今天做表格的求和 / 均值 做个记录：
<avue-crud :option="option" :summary-method="summaryMethod"></avue-crud>
data() {
return {
option: {
......
showSummary: true, //会在表格尾部展示合计行
}
}
}
methods: {
// 自定义逻辑方法
summaryMethod(param) {
const { columns, data } = param; // 这里可以看出，自定义函数会传入每一列，以及数据
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总计';
} else if (index >= 1) { // index>=1后的列进行求和
// 页面分别统计 处理
const values = data.map(item => item[column.property]);
if (!values.every(value => isNaN(value))) {
// 求和计算方法
// sums[index] = values.reduce((prev, curr) => {
// const value = curr;
// if (!isNaN(value)) {
// return parseFloat((prev + curr).toFixed(10));
// } else {
// return prev;
// }
// }, 0);
// 求均值计算方法
let totalCount = 0; // 求平均数时的次数
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
totalCount++;
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index] / totalCount;
sums[index] = sums[index].toFixed(2);
} else {
sums[index] = '--'; // 如果列的值有一项不是数字，就显示这个自定义内容
}
} else {
sums[index] = '--'
}
});
return sums; // 最后返回合计行的数据
}
}
elementUI官网地址：点击此处https://element.eleme.cn/#/zh-CN/component/table
借鉴大神文章：点击此处https://blog.csdn.net/haosicx/article/details/117904087
