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;
    },
相关推荐
island13148 分钟前
JAVA Web 期末速成
java·开发语言·前端
小峰编程44 分钟前
Python函数——万字详解
linux·运维·服务器·开发语言·前端·网络·python
海盐泡泡龟1 小时前
Javascript本地存储的方式有哪些?区别及应用场景?(含Deep Seek讲解)
开发语言·javascript·ecmascript
11054654012 小时前
23、电网数据管理与智能分析 - 负载预测模拟 - /能源管理组件/grid-data-smart-analysis
前端·能源
开发者小天2 小时前
React中startTransition的使用
前端·react.js·c#
@PHARAOH3 小时前
WHAT - 缓存命中 Cache Hit 和缓存未命中 Cache Miss
前端·缓存
计算机学姐3 小时前
基于SpringBoot的小型民营加油站管理系统
java·vue.js·spring boot·后端·mysql·spring·tomcat
Elastic 中国社区官方博客3 小时前
JavaScript 中使用 Elasticsearch 的正确方式,第一部分
大数据·开发语言·javascript·数据库·elasticsearch·搜索引擎·全文检索
万物得其道者成3 小时前
从零开始创建一个 Next.js 项目并实现一个 TodoList 示例
开发语言·javascript·ecmascript
海天胜景4 小时前
无法加载文件 E:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js