今天遇到一个问题,关于elementUi
中的table
组件,需要添加一栏合计,统计指定列的总和。
效果图如下:
1.在table
组件上添加show-summary :summary-method="getSummaries"
这样就可以对getSummaries
方法进行处理了
2. getSummaries
方法
getSummaries(param) {
const {
columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
} else {
if (index == 9||index==10||index==11||index==12) {
const values = data.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);
}
}
}
});
return sums;
},
因为我这边只统计4列的总和,所以在使用数组的reduce
方法之前可以对index
索引进行判断。
运行项目时,发现初始化时合计栏并没有展示出来,此时可以通过下面的方法进行处理。
3. 给table
组件添加ref
属性
4. 在updated()
生命周期函数中添加下面的表格重新渲染代码
updated() {
this.$nextTick(() => {
console.log('表格重新渲染了');
this.$refs['table'].doLayout();
})
},
平时工作中很好用到updated
生命周期函数,都快忘记了,重新渲染表格这个地方用到了。
完成!!!