elementUi table组件添加合计功能——初始化时页面不展示合计一栏——基础积累

今天遇到一个问题，关于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生命周期函数，都快忘记了，重新渲染表格这个地方用到了。

完成！！！