[element-ui]笔记：el-table开启合计后，计算合计列

需求：第一列和第二列为列合计内容，第三列为 第二列合计内容 / 第一列合计内容

 看到element-ui里面的show-summary方法，以及自定义的:summary-method，很合适；又参考了

(6条消息) Element的table表格开启合计之后，合计单独使用计算公式_element表格带计算_滑稽的鼠标的博客-CSDN博客

(6条消息) 【element-ui笔记】element中el-table（合计）计算指定列_element总计计算前两列总计和_一颗甜橙树的博客-CSDN博客

 实现代码如下：

function clicked(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '总计';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'count' || column.property === 'time') {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
            sums[index] += ' ';
        } else if (column.property === 'avg') {
            this.$nextTick(() => {
                //tableList是ref中定义的，footerWrapper是F12看出来的
          
                //获取提供方法次数合计值
                let amountNode1 = this.$refs.tableList.$refs.footerWrapper.querySelector('.el-table_1_column_2');
                let amountSum1 = parseFloat(amountNode1.innerText);

                // 获取总耗时合计值
                let amountNode2 = this.$refs.tableList.$refs.footerWrapper.querySelector('.el-table_1_column_4');
                let amountSum2 = parseFloat(amountNode2.innerText);

                setTimeout(() => {
                    let newSum = (amountSum2 / amountSum1).toFixed(3)
                    //把新的值回显到平均耗时合计中
                    let amountNode3 = this.$refs.tableList.$refs.footerWrapper.querySelector('.el-table_1_column_5');
                    amountNode3.innerHTML = "
" + newSum + "
";
                }, 100);
            })
        }else{
            sums[index] = ' ';
        }
    });
    return sums;
}

*******************************************************************************************************

上面的代码只适合静态页面，不然会报错 this.$nextTick Errror,优化后代码如下：

function getTotal(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '总计';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index === 1 || index === 3) {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
            sums[index] += ' ';
        } else if (index === 4) {
            sums[index] = (sums[3] / sums[1]).toFixed(3);
        } else {
            sums[index] = ' ';
        }

    });
    return sums;
}



function getTotal(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '总计';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'count' || column.property === 'time') {
             sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                     return prev + curr;
                 } else {
                     return prev;
                 }
             }, 0);
             sums[index] += ' ';
         } else if (column.property === 'avg') {
             if (index === 4) {
                 sums[index] = (sums[3] / sums[1]).toFixed(3);
             }
         } else {
             sums[index] = ' ';
         }

    });
    return sums;
}

这两种方式都可以