el-table合计行

用到属性 showSummary 是否显示合计,方法 summaryMethod 计算合计的自定义方法。
        <el-table ref="elTable"
                    :data="tableData"
                    :size="tableSize"
                    :width="width"
                    :height="height"              
                    :showHeader="showHeader"
                    :showSummary="showSummary"
                    :sumText="sumText"
                    :summaryMethod="getSummary"

 在vue单元文件method区实现求和函数:

//表格合计计算
            getSummary(param) {
                const { columns, data } = param;
                const sums = [];
                //要求和的列
                const sumColumns=['数量','总金额(进价)','总金额(零售价)'];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    if (sumColumns.indexOf(column.label)<0) {
                        sums[index] = '';
                        return;
                    }
                    const values = data.map(item => item[column.property]);
                    sums[index] = values.reduce((total, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return Number(total) + Number(curr);
                        } else {
                            return Number(total);
                        }
                    }, 0);
                    sums[index]=sums[index].toFixed(2);
                })
                return sums;
            },

 

posted @ 2022-06-27 10:15  lybingyu  阅读(1477)  评论(0编辑  收藏  举报