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;
    },
相关推荐
流光D1 小时前
AI Era: Building Web Sites and Configuring Nginx Reverse Proxy Process
前端·人工智能·nginx
sakidd1 小时前
VS Code 的 AI Chat 现在已经这么能干了?
前端
吴长建先生1 小时前
Vue.js支付回调页面如何设计才能保障对账准确性?
vue.js
计算机魔术师1 小时前
英伟达砸130亿美元买下一个平台,黄仁勋到底在怕什么?
前端
全栈项目管理程序猿1 小时前
ArcGIS JS 基础教程(18):SceneLayer 场景图层
javascript
leoZ2311 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
coderCN2 小时前
Nodejs path OS process child_process FS crypto zlib ffmpeg Markdown 转 html
前端
七牛开发者2 小时前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent
梨想橙汁2 小时前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
吴长建先生2 小时前
支付回调接口设计与代码规范:如何提升团队工程化能力
vue.js