el-table树状表格末行合计

这篇具有很好参考价值的文章主要介绍了el-table树状表格末行合计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先,由于我的表头是动态的,所以就稍微复杂一点

效果图
el-table树状表格末行合计,element,vue.js,前端,javascript
表头数据格式是这样的
el-table树状表格末行合计,element,vue.js,前端,javascript
表格的数据格式是这样的
el-table树状表格末行合计,element,vue.js,前端,javascript
然后用合并的方法,此处就需要递归去计算,根据props去匹配每一列的数据,然后加起来,关键代码文章来源地址https://www.toymoban.com/news/detail-739071.html

    //合计处理
    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;
    },

到了这里,关于el-table树状表格末行合计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue/element】 el-table实现表格动态新增/插入/删除 表格行,可编辑单元格

    效果如下: 点击“新增一行”可以在表格最后新增一行,单元格内容可编辑 点击绿色+按钮,可在指定行的后面插入一行 点击红色-按钮,可以删除指定行 原理:表格 el-table 是通过动态循环 tableData 生成,只要对 tableData 数组进行增加删除元素,就可以达到效果 这里用了ele

    2024年02月16日
    浏览(63)
  • vue element-ui表格(el-table)数据导出execl文件

    功能实现:element UI 的el-table数据导出为execl文件 使用到插件:xlsx、file-saver exportExecl.js 代码如下: 页面代码如下:

    2024年02月14日
    浏览(57)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(48)
  • element-ui中的el-table的summary-method(合计)的使用

    图片1: 图片2: 优点:         直接使用summary-method方法,直接,方便 缺点:         只是在表格下面添加了一行,如果想有多行就不行了 优点:          可以想表格下面添加多少行都行, 缺点:         列表的序号会一直往下走

    2024年02月11日
    浏览(49)
  • 解决vue-electron element-UI中el-table表格不显示

    问题:element-UI官网上el-table组件,引入自己项目的时候表格不显示。 解决方案: 修改.electron-vuewebpack.renderer.config.js 将 修改为 即可解决。

    2024年02月16日
    浏览(53)
  • 【解决 Element UI 当中 el-table 中使用 show-summary 不显示合计一行】

    问题:在进行数据统计的过程中使用到了element-ui 的 el-table 组件,出现了合计统计无法渲染情况。 示例场景:在制作统计一栏时需要用到 element-ui 当中的 el-table 表格组件,组件当中有 show-summary 参数可以实现表格的自动合计,在实际开发中出现了渲染失败或不渲染的情况导致

    2024年02月07日
    浏览(53)
  • 前端 vue el-table 增加合计行及合并单元格

    自己总结的,不好别喷,谢谢~~~  表格触发调用方法  合计行代码 在 合计行方法中 直接去修改了表格样式  

    2024年02月07日
    浏览(48)
  • 解决Element-UI el-table show-summary合计行不显示问题

    一、问题描述 Element的el-table组件在设置表格高度heoght 同时 开启合计行show-summary ,项目中合计这一列不显示,但是缩放下页面或者稍微修改下F12里dom中的东西就又显示了 二、问题分析 查看dom发现,合计一列并未包含在el-table中,而el-table原始文件给的是overflow:hidden; 二、解决

    2024年02月11日
    浏览(74)
  • vue使用Element UI时,el-table表格整行操作单选禁选并隐藏全选框

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月13日
    浏览(47)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包