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;
    },
相关推荐
无羡仙19 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端12329 分钟前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天30 分钟前
前端 9大 设计模式
前端
搞个锤子哟30 分钟前
网站页面放大缩小带来的问题
前端
hj5914_前端新手31 分钟前
React 基础 - useState、useContext/createContext
前端·react.js
半花33 分钟前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅34 分钟前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
霍格沃兹_测试39 分钟前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
用户28003832908401 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
toooooop81 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket