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 @   lybingyu  阅读(1544)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示