今天做表格的求和 / 均值 做個記錄：
<avue-crud :option="option" :summary-method="summaryMethod"></avue-crud>
data() {
return {
option: {
......
showSummary: true, //會在表格尾部展示合計行
}
}
}
methods: {
// 自定義邏輯方法
summaryMethod(param) {
const { columns, data } = param; // 這里可以看出蟆沫，自定義函數(shù)會傳入每一列挪挤，以及數(shù)據(jù)
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '總計';
} else if (index >= 1) { // index>=1后的列進(jìn)行求和
// 頁面分別統(tǒng)計 處理
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; // 求平均數(shù)時的次數(shù)
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] = '--'; // 如果列的值有一項不是數(shù)字，就顯示這個自定義內(nèi)容
}
} else {
sums[index] = '--'
}
});
return sums; // 最后返回合計行的數(shù)據(jù)
}
}
elementUI官網(wǎng)地址：點擊此處https://element.eleme.cn/#/zh-CN/component/table
借鑒大神文章：點擊此處https://blog.csdn.net/haosicx/article/details/117904087
