element表格合并列数据相同合并单元格

news2024/11/23 8:15:21

在这里插入图片描述

 <!-- :span-method="objectSpanMethod"合并列 -->
  <el-table stripe  :data="morningdataList" style="width: 100%" :span-method="objectSpanMethod" >
          <el-table-column align="center" label="" :show-overflow-tooltip="true" prop="bigCategoryName" ></el-table-column>
          <el-table-column align="center" label="" :show-overflow-tooltip="true" prop="smallCategoryName"  width="70px" ></el-table-column>
          <el-table-column align="center" label="本日"  prop="today"  width="70px"></el-table-column>
          <el-table-column align="center" label="比率/出率" prop="rate"  width="90px"></el-table-column>
          <el-table-column align="center" label="月累计" prop="monthTotal" width="70px"></el-table-column>
          <el-table-column align="center" label="月比率/出率" prop="monthRate"  width="90px"></el-table-column>
  </el-table>
// 合并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    let that = this;
    // 因为日期在第一项,从0开始判断columnIndex === 0合并第一列
    if (columnIndex === 0) {
        // 当前行值及日期值为:bigCategoryName
        let idName = that.morningdataList[rowIndex].bigCategoryName;
        // rowIndex是行索引,判定第二行是不是和前面一行的日期值相同
        if (rowIndex > 0) {
        if (that.morningdataList[rowIndex].bigCategoryName != that.morningdataList[rowIndex - 1].bigCategoryName) {
            let i = rowIndex;
            let num = 0;
            // 遍历
            while (i < that.morningdataList.length) { 
            if (that.morningdataList[i].bigCategoryName === idName) {
                i++;
                num++;
            } else {
                i = that.morningdataList.length;
            }
            }
            return {
            // 这里返回的num就是有相同的行数
            rowspan: num,
            // 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
            colspan: 1,
            }
        } else {
            return {
            rowspan: 0,
            colspan: 1,
            }
        }
        } else {
        let i = rowIndex;
        let num = 0;
        while (i < that.morningdataList.length) {
            if (that.morningdataList[i].bigCategoryName === idName) {
            i++;
            num++;
            } else {
            i = that.morningdataList.length;
            }
        }
        return {
            rowspan: num,
            colspan: 1,
        }
        }
    }
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2125680.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

企业数据资产目录建设方案(可编辑的46页PPT)

引言&#xff1a;在当今数据驱动的时代&#xff0c;数据已成为企业最宝贵的资产之一&#xff0c;其有效管理和利用直接关系到企业的决策效率、业务创新能力和市场竞争力。数据资产目录建设方案旨在通过系统化的方法&#xff0c;对企业内部的数据资源进行全面的梳理、分类、编目…

vscode中前端项目文件格式化备份

文件->首选项->设置 点击图标后进入&#xff0c;并粘贴下面代码 {"files.associations": {"*.vue": "vue","*.wpy": "wxml","*.wxml": "html","*.wxss": "css","*.cjso…

耦合性例题

答案&#xff1a;D 知识点&#xff1a; 耦合类型 描述 非直接耦合 两个模块之间没有直接关系&#xff0c;它们之间的联系完全是通过主模块的控制和调用实现的 数据耦合 一组模块借助参数表传递简单数据 标记耦合 一组模块通过参数表传递记录信息&#xff08;数据结构&a…

数据名称:全球土地覆盖数据产品(GLASS-GLC)

数据详情 GLASS-GLC产品以1982&#xff5e;2015年的全球陆表特征参量数据集&#xff08;GLASS CDR&#xff09;为数据源&#xff0c;借助谷歌地球引擎&#xff08;Google Earth Engine&#xff09;平台进行开发&#xff0c;涵盖耕地、森林、草原、灌木、苔原、裸地和冰雪七大土…

自注意力机制(self-attention)

自注意力机制&#xff08;self-attention&#xff09; 之前听过吴恩达老师的课&#xff0c;吴恩达老师CNN那一块讲的特别好&#xff0c;但是后面RNN这一部分我听的不是很明白&#xff0c;今天有看了李宏毅老师attention这部分的课&#xff0c;总结一下笔记。 self-attention …

外贸|基于Java+vue的智慧外贸平台系统(源码+数据库+文档)

外贸|智慧外贸平台|外贸服务系统 目录 基于Javavue的智慧外贸平台系统 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&…

计算机毕业设计选题推荐-项目评审系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

YOLOv5改进 | 模块缝合 | C3 融合RVB + EMA注意力机制【二次融合】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv5入门 改…

内聚性例题

答案&#xff1a;D 知识点&#xff1a; 内聚类型 描述 功能内聚 完成一个单一功能&#xff0c;各个部分协同工作&#xff0c;缺一不可 顺序内聚 处理元素相关&#xff0c;而且必须顺序执行 通信内聚 所有处理元素集中在一个数据结构的区域上 过程内聚 处理元素相关&a…

解决appium ui自动化无法识别悬浮窗问题

事情的起因是在两个项目上&#xff0c;A项目的虚浮窗按钮无法获取 B项目的推荐和看动态无法获取UI元素 通过adb shell dump也是无法获取到&#xff0c;但就一个问题&#xff0c;为啥weditor可以定位到呢&#xff1f; 那奇怪了是什么原因&#xff1f;为什么会突然有这个现象呢&a…

喜报 速程精密牵头编制团体标准《ZR机械手通用技术要求》正式发布

喜报 速程精密牵头编制团体标准《ZR机械手通用技术要求》正式发布 近日&#xff0c;由深圳市速程精密科技有限公司牵头&#xff0c;联合华南理工大学、深圳大学、电子科技大学(深圳)高等研究院、深圳职业技术大学、深圳市创新设计研究院、固高伺创驱动技术(深圳)有限公司、深圳…

TinyWebserver的复现与改进(7):日志系统

本项目中&#xff0c;使用单例模式创建日志系统&#xff0c;对服务器运行状态、错误信息和访问数据进行记录&#xff0c;该系统可以实现按天分类&#xff0c;超行分类功能&#xff0c;为了简单&#xff0c;将使用异步写入的方式。&#xff08;后续再添加同步写入&#xff09; …

声音之旅:2024四大必备音乐剪辑软件盘点!

音乐剪辑&#xff0c;作为一种艺术形式&#xff0c;让每个人都能够成为自己音乐故事的导演。今天&#xff0c;我们将探索几款优秀的音乐剪辑工具&#xff0c;它们分别是福昕音频剪辑、Audio Trimmer、Ocenaudio和闪电音频剪辑。 福昕音频剪辑 直达链接&#xff1a;www.pdf365…

去拼多多闭着眼涨薪80%,但。。。

大家好&#xff0c;我是鸭鸭。 如果给你月薪涨 80%&#xff0c;总包涨 35%&#xff0c;但是新工作需要 11116&#xff0c;你会接这个 offer 吗&#xff1f; 起因是鸭鸭今天刷到了这样一个帖子&#xff1a; 楼主表示“吓人啊”&#xff0c;可见这样的涨幅确实超乎预料。 当然…

走进低代码表单开发(二):高效表单设计新利器

前面我们已经介绍了勤研低代码开发平台的报表数据源设计相关的内容&#xff0c;当数据源设计完成后&#xff0c;我们将继续进行表单的页面开发&#xff0c;接下来&#xff0c;我们一起走进勤研低代码开发平台高效便捷的表单设计&#xff0c;来看看勤研低代码平台如何为用户带来…

OJ在线评测系统 前端开发设计优化通用菜单组件 初始化JS全局项目入口

通用菜单组件的开发一 今天完善前端通用项目的模版 我们的前端初始化先用Vue cli脚手架跑页面 然后用arco组件库 我们要完善前端通用项目模版 先改几个bug 优化页面布局 这个footer没有一直处于底部 我们在原生css里去修改 把 position 属性改为 sticky 粘性 #basicLayo…

基于Spring搭建SpringMvc框架

SpringMvc Spring MVC 是 Spring 框架的一部分&#xff0c;它是一个设计用来构建 web 应用的框架。Spring MVC 实现了 Model-View-Controller&#xff08;MVC&#xff09;设计模式&#xff0c;帮助开发者将业务逻辑、用户界面以及输入处理等职责分离&#xff0c;从而提高代码的…

论文速读|Neural MP:一种通用神经运动规划器

论文地址&#xff1a;https://mihdalal.github.io/neuralmotionplanner/resources/paper.pdf 这篇论文提出的Neural MP方法通过大规模数据生成、通用神经策略和测试时优化&#xff0c;显著提高了运动规划的效率和成功率。Neural MP在真实世界中的表现优于现有的基于采样、优化和…

transform: rotate 旋转中心在左上角

问题 发现旋转中心在左上角&#xff0c;通过transform-origin修改无效。下面的代码默认一直围绕左上角黑色方块旋转 解决 控制旋转的位置出错了&#xff0c;本来应该是围绕content的中心进行旋转&#xff0c;但是content没有长宽&#xff0c;所以content默认在左上角&#…

华为OD机试 - 寻找最优的路测线路 - Dijkstra算法(Java 2024 E卷 200分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…