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;
    },
相关推荐
╰つ栺尖篴夢ゞ几秒前
Web之深入解析Cookie的安全防御与跨域实践
前端·安全·存储·cookie·跨域
木斯佳4 分钟前
前端八股文面经大全:腾讯前端一面(2026-04-04)·深度解析
前端·ai·鉴权·monorepo
code_Bo6 分钟前
kiro生成小程序商业案例
前端·微信小程序·小程序·云开发
yellowbuff7 分钟前
为什么你的 0.01 秒倒计时看起来一卡一卡的?
前端
onebyte8bits10 分钟前
NestJS 系列教程(十八):文件上传与对象存储架构(Multer + S3/OSS + 访问控制)
前端·架构·node.js·状态模式·nestjs
Ruihong12 分钟前
放弃 Vue3 传统 <script>!我的 VuReact 编译器做了一次清醒取舍
前端·vue.js
weixin_4561648314 分钟前
vue3 父组件向子组件传参
前端
Beginner x_u16 分钟前
前端八股整理|CSS|高频小题 01
前端·css·八股
蜡台20 分钟前
IDEA LiveTemplates Vue ElementUI
前端·vue.js·elementui·idea·livetemplates
E-cology23 分钟前
【泛微低代码开发平台e-builder】使用HTML组件实现页面中部分区域自定义开发
前端·低代码·泛微·e-builder