首页 > 其他分享 >el-table合并行合并列

el-table合并行合并列

时间:2023-04-21 11:15:29浏览次数:38  
标签:el return spanArr rowIndex 合并 columnIndex table row

1.合并多行

    objectSpanMethod ({ row, column, rowIndex, columnIndex }, list) {
      // console.log("objectSpanMethod", columnIndex, list)
      if (columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
        if (rowIndex == 0) {
          return {
            rowspan: list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

    },

 

 //动态合并行
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // columnIndex === xx 找到第xx列,实现合并随机出现的行数
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 因为要合并的行数是不固定的,此函数是实现合并随意行数的功能
    getSpanArr () {
        this.spanArr=[]
        let pos = 0
        for (var i = 0; i < this.dataTable.length; i++) {
          if (i === 0) {
            // 如果是第一条记录(即索引是0的时候),向数组中加入1
            this.spanArr.push(1);
            pos = 0;
          } else {
            if (this.dataTable[i].name=== this.dataTable[i - 1].name) {
              this.spanArr[pos] += 1;
              this.spanArr.push(0);
            } else {
              // 不相等push 1
              this.spanArr.push(1);
              pos = i;
            }
          }
      }
    },

  

 

2.合并多列

 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.pushType == 2) {
        if (columnIndex == 3) {
          return [1, 4]
        } else if (columnIndex == 4 || columnIndex == 5 || columnIndex == 6) {
          return [0, 0]
        }
      }
    },

  

 

标签:el,return,spanArr,rowIndex,合并,columnIndex,table,row
From: https://www.cnblogs.com/zyx-blog/p/17339637.html

相关文章

  • 多个DataTable的合并成一个新表
    https://www.cnblogs.com/JuneZhang/archive/2011/12/11/2284243.html有时我们知道了两个DataTable1和DataTable2,我们希望将它们合并为一个新的DataTable(下面的例子中命名为了newDataTable),这就分为两种情况:DataTable1和DataTable2结构相同、DataTable1和DataTable2结构不同,下面分......
  • poi读写EXCEL
    读写EXCEL来源:bilibili狂神说导入依赖<!--导入依赖--><dependencies><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.9</version>......
  • Linux系统中Shell的优势是什么?
    Linux系统中Shell的优势是什么?京东云开发者 51Testing软件测试网 2023-04-2017:30 发表于上海  Shell可以帮我们做什么 作为一名测试开发工程师,在与Linux服务器交互过程中,大都遇到过以下这些问题:一次申请多台服务器,多台服务器需要安装相同软件,配置相同的环......
  • easyExcel导出单个文件多个sheet页-注解方式
    easyExcel注解方式导出,为什么要用注解方式?注解方式更简单、更方便,相比非注解的方式减少了大量代码。但是,注解方式不够灵活,精确度也不高,比如列宽,注解方式仅支持int类型,最大255个字符,而非注解方式就要精确的多,可以随意设置。所以,对于要求比较高的、复杂的Excel,还是推荐使用非注解......
  • ASEMI代理ADM3051CRZ-REEL7原装ADI车规级ADM3051CRZ-REEL7
    编辑:llASEMI代理ADM3051CRZ-REEL7原装ADI车规级ADM3051CRZ-REEL7型号:ADM3051CRZ-REEL7品牌:ADI/亚德诺封装:SOIC-8批号:2023+引脚数量:8安装类型:表面贴装型ADM3051CRZ-REEL7汽车芯片ADM3051CRZ-REEL7特征物理层CAN收发器VCC上的5V操作符合ISO11898标准高达1Mbps的高速数......
  • 关于浏览器的Selection对象,以及window.getSelection()的API用法
    Selection 对象就是用户选择的文本范围或插入符号的位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。具有以下属性和方法。 1、anchorNode只读属性,返回选区开始位置所属的节点。用户可能从左往右框选,也可能从右往左框选。但是锚点......
  • shell/bash脚本编程
    原文地址zhuanlan.zhihu.comshell/bash脚本编程残枫cps​目录收起介绍我们的第一个脚本脚本解释器用户输入测试条件判断迭代语句-循环参数传递退出状态码逻辑操作符函数函数参数传递通配符调试原文地址zhuanlan.zhihu.com原文链接对于我自己来说,学习新框架或技术......
  • AutoGPT、AgentGPT、BabyAGI、HuggingGPT、CAMEL:各种基于GPT-4自治系统总结
    ChatGPT和LLM技术的出现使得这些最先进的语言模型席卷了世界,不仅是AI的开发人员,爱好者和一些组织也在研究探索集成和构建这些模型的创新方法。各种平台如雨后春笋般涌现,集成并促进新应用程序的开发。AutoGPT的火爆让我们看到越来越多的自主任务和代理利用了GPT-4的API。这些发展......
  • SWT shell设置可变大小
    SWTshell设置可变大小 Shellshell=newShell(shell,SWT.SHELL_TRIM)SWT.SHELL_TRIM会在shell窗口中加上最大小,最小化,关闭,以及窗口可变大小 本文来自博客园,作者:jason_bo,转载请注明原文链接:https://www.cnblogs.com/jasonboboblog/p/13398550.html......
  • Vue&Element-Ui(支技VUE2)&解决ttf, woff 文件报错的问题
    一、Vue&Element-Ui(支技VUE2)Vue是一套用于构建用户界面的渐进式JavaScript(主张最少)框架,开发者只需要关注视图层,它不仅易于上手,还便于与第三方库或既有项目的整合。是基于MVVM(Model-View-ViewModel即:视图层-视图模型层-模型层)设计思想。提供MVVM数据双向绑定的库,专注于UI......