el-table树状表格末行合计

首先,由于我的表头是动态的,所以就稍微复杂一点

效果图

表头数据格式是这样的

表格的数据格式是这样的

然后用合并的方法,此处就需要递归去计算,根据props去匹配每一列的数据,然后加起来,关键代码

复制代码
    //合计处理
    getSummaries(param) {
      const { columns, data } = param;
      const sums = ["合计"];

      let num = 0;
      const func = (arr, props) => {
        arr.forEach((item) => {
          if (item.map) {
            const value = item.map[props];
            // 转数字
            num += value && value != "" ? Number(value) : 0;
          }
          if (item.children && item.children.length > 0) {
            func(item.children, props);
          }
        });
      };

      columns.forEach((item, index) => {
        if (index > 0) {
          const props = item.property;
          num = 0;
          func(data, props);
          sums.push(num);
        }
      });

      return sums;
    },
相关推荐
竹林8186 分钟前
从 RPC 超时到批量签名:我用 @solana/web3.js 重构了一个 NFT 铸造页面,踩了这些坑
前端·javascript
工业HMI实战笔记16 分钟前
工业HMI界面布局“1核2辅”黄金结构,适配90%场景
前端·ui·性能优化·自动化·交互
橘子星37 分钟前
从零手写 RAG 语义检索:基于 Node.js 实现轻量级向量搜索
javascript·人工智能
林希_Rachel_傻希希1 小时前
web性能优化之————图片效果
前端·javascript·面试
橘子星1 小时前
基于 MCP 协议实现本地文件读取工具服务开发实践
javascript·人工智能
Darling噜啦啦1 小时前
前端存储与 this 指向完全指南:从 LocalStorage 实战到 call/apply/bind 深度解析
前端·javascript
sugar__salt1 小时前
手撕字符串算法:反转、回文、验证回文 Ⅱ 完整拆解
javascript·算法·面试·职场和发展
wei1986211 小时前
.net添加web引用和添加服务引用有什么区别?
java·前端·.net
To_OC1 小时前
从一行报错开始,把字符串反转、回文算法连带着包装类一起捋明白
javascript·算法·api
蜡台2 小时前
Node 安装 awesome-qr 失败解决
javascript·vue·qrcode·awesome-qr