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;
    },
相关推荐
老毛肚1 小时前
jeecgboot vue 路由 拆分01
前端·javascript·typescript
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_46:(响应式实战——用媒体查询打造双列布局)
前端·css·ui·html·tensorflow·媒体
狗凯之家源码网1 小时前
多语言企鹅养殖投资返利系统 自定义产品配置 一键部署源码
前端·架构·php
每天吃饭的羊1 小时前
LeetCode 链表
前端
神仙别闹1 小时前
VUE框架 + Element UI + Node 模拟打印机的 Web 即时打印
前端·vue.js·ui
vivo互联网技术1 小时前
把输入框变成 AI 的“超级入口”(ProseMirror 全流程实战)
前端·agent
lunzi_08261 小时前
《图解HTTP》--第5章-与HTTP协作的Web服务器
服务器·前端·http
李剑一2 小时前
面试第一关!面试官:讲一下事件循环机制,宏&微任务,还有渲染时机
前端·面试
如果超人不会飞2 小时前
TinyVue图标使用完全指南
vue.js