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;
    },
相关推荐
勤劳打代码13 小时前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安13 小时前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
昭昭日月明13 小时前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
white-persist13 小时前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
练习时长一年13 小时前
Spring内置功能
java·前端·spring
SHUIPING_YANG13 小时前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
lypzcgf14 小时前
Coze源码分析-资源库-编辑数据库-前端源码-核心组件
前端·数据库·源码分析·coze·coze源码分析·ai应用平台·agent平台
勤奋菲菲14 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
晒太阳57914 小时前
懒加载与按需加载
前端