el-table动态合并单元格

news2024/10/7 20:36:02

在这里插入图片描述
el-table使用这个方法合并单元格,:span-method=“hbcell”

<el-table size="small" :data="table.data" border 
        empty-text="暂无数据" :cell-style="cellStyle" :header-cell-style="tableHeaderColor"
        :span-method="hbcell"
       >
            <el-table-column align="center" v-for="item in table.columns" :key="item.prop" :prop="item.prop"
            :label="item.label">
            </el-table-column>
        </el-table>
//合并单元格
        hbcell({row,column,rowIndex,columnIndex}){
            if (columnIndex === 0) {//只需要合并第一列
               return this.mergeCol(rowIndex,this.table.columns[columnIndex].prop)
            }
        }



//处理合并单元格
        mergeCol(rowIndex,prop){
            
            //获取当前单元格的值
            let colVal = this.table.data[rowIndex][prop]; 
            
            //循环每一列的数据
            if(rowIndex>0){
                if(this.table.data[rowIndex][prop]!=this.table.data[rowIndex-1][prop]){
                    let i=rowIndex;
                    let num=0;
                    while(i<this.table.data.length){
                        if(this.table.data[i][prop]===colVal){
                            //相等进行计数
                            i++;
                            num++;
                        }else{
                            //跳出循环
                            break;
                        }
                    }
                    
                    return {
                        rowspan:num,
                        colspan:1
                    };
                }else{
                    //相等则不显示
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }else{
                //如果为第一行
                let i=rowIndex;
                let num=0;
                while(i<this.table.data.length){
                    if(this.table.data[i][prop]===colVal){
                            //相等进行计数
                            i++;
                            num++;
                        }else{
                            //跳出循环
                            break;
                        }
                }
                
                return {
                    rowspan:num,
                    colspan:1
                };
                
            }
            
            
        },

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

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

相关文章

基于web的教务管理系统java jsp学校学生教师选课mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于web的教务管理系统 系统有3权限&#xff1a;系统…

恒运资本:数据资产入表正式落地,产业化大时代开启,概念股狂欢!

数据要素产业化大时代降临&#xff0c;哪些上市公司有望获益&#xff1f; 8月22日早盘&#xff0c;医疗设备龙头联影医疗开盘跌落&#xff0c;盘中一度跌超15%&#xff0c;跌破发行价&#xff0c;盘中跌幅创该股上市以来单日新高。午间收盘&#xff0c;跌幅仍有13.72%&#xff…

RTSP/Onvif协议EasyNVR安防视频云平台配置录像阈值实现边删边录需求的具体操作步骤

EasyNVR是基于RTSP/Onvif协议的视频接入、处理及分发的安防视频云平台&#xff0c;可提供丰富且灵活的视频能力&#xff0c;包括&#xff1a;设备接入、实时视频直播、录像、云存储、录像回放与检索等功能&#xff0c;也能支持GB28181协议进行平台级联。 有很多用户咨询我们&am…

通达信指标公式16:使用BARSLAST函数写一个指标回测的思路

★★★★★博文原创不易&#xff0c;我的博文不需要打赏&#xff0c;也不需要知识付费&#xff0c;可以白嫖学习小技巧&#xff0c;喜欢的老铁可以多多帮忙点赞&#xff0c;小红牛在此表示感谢&#xff0c;就是对作者的最大支持。愿与诸君共勉&#xff0c;悟道于股市★★★★★…

2023中国算力大会,和鲸科技携手生态伙伴,推动算力创新发展与应用

8月18日至8月19日&#xff0c;由工业和信息化部、宁夏回族自治区人民政府共同主办的 2023 中国算力大会在宁夏银川举行。本届大会以“算领新产业潮流 力赋高质量发展”为主题&#xff0c;聚焦算力前沿技术领域&#xff0c;展示算力融合应用成果&#xff0c;推动算力产业加速发展…

QToolButton

QToolButton API使用方式 使用方法和功能跟QPushButton基本一致, 只不过在对于关联菜单这个功能点上, QToolButton类可以设置弹出的菜单的属性, 以及在显示图标的时候可以设置更多的样式, 可以理解为是一个增强版的QPushButton。 API / 构造函数 / QToolButton::QToolButton(…

C语言小练习(二)

&#x1f31e; “去努力吧&#xff0c;最坏的结果不过是大器晚成&#xff01;” Day02 &#x1f4dd; 一.选择题&#x1f4dd;二.编程题 &#x1f4dd; 一.选择题 1.&#x1f388;、以下程序段的输出结果是&#xff08; &#xff09; #include <stdio.h> int main() {…

蚂蚁区块链投票案例(一)---蚂蚁链简介

文章目录 摘要背景蚂蚁链简介联盟链&#xff08;合约体验链&#xff09;开放联盟链开发者测试链 总结遗留问题测试环境和生产环境的问题&#xff1f; 摘要 计划用三篇文章&#xff0c;一个月左右的时间来实现一个蚂蚁开放联盟链上的区块链投票案例&#xff0c;本文是系列第一篇…

设计模式(8)外观模式

一、 1、使用背景&#xff1a;降低访问复杂系统的内部子系统时的复杂度&#xff0c;简化客户端之间的接口。 2、定义&#xff1a; 为子系统中的一组接口定义一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用。完美地体现…

恒运资本:科创板与创业板的区别?

近年来&#xff0c;跟着技能的飞速发展和立异认识的提高&#xff0c;科技立异成为了各国和企业竞相争夺的方向。在中国&#xff0c;“科创板”和“创业板”成为了人们重视的焦点。它们都是现代股票交易商场上的板块&#xff0c;但两者之间有何差异呢&#xff1f;下面从多个视点…

【allegro 17.4软件操作保姆级教程十一】表贴器件封装制作

&#x1f449;个人主页&#xff1a; highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 目录 封装组成元素 焊盘类型 表贴器件封装制作 环境设置 计算坐标 放置pin脚 …

pytorch基础实践-数据与预处理

文章目录 数据集Fashion-MNIST 数据集 数据预处理包的导入在Pytorch中进行 ETL利用torchvison包获取和处理数据集&#xff08;ET&#xff09; 访问数据集访问和查看 train_set 中的单个数据利用 DataLoader 成批访问数据 数据集 Fashion-MNIST 数据集 MNIST MNIST&#xff0c;…

day1 链表专题 牛客TOP100 BM 1-10

文章目录 链表BM1 反转链表BM2 链表内指定区间反转BM3 链表中的节点每k个一组翻转BM4 合并两个排序的链表BM5 合并k个已排序的链表BM6 判断链表中是否有环BM7 链表中环的入口结点BM8 链表中倒数最后k个结点BM9 删除链表的倒数第n个节点BM10 两个链表的第一个公共结点 链表 BM1…

ssm+vue绿色农产品推广应用网站源码和论文PPT

ssmvue绿色农产品推广应用网站041 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高…

浅谈限流式保护器在电气线路火灾中的应用

安科瑞 华楠 电气线路起火的主要原因 1.线路短路 所谓短路就是交流电路的两根导线互相触碰&#xff0c;电流不经过线路中的用电设备&#xff0c;而直接形成回路。由于电线本身的电阻比较小&#xff0c;若仅是通过电线这个回路&#xff0c;电流就会急剧变大&#xff0c;比正常情…

HAProxy的配置与搭建

Haproxy概念 HAProxy是可提供高可用性、负载均衡以及基于TCP和HTTP应用的代理&#xff0c;是免费、快速并且可靠的一种解决方案。HAProxy非常适用于并发大&#xff08;并发量达1w以上&#xff09;web站点&#xff0c;这些站点通常又需要会话保持或七层处理。HAProxy的运行模式…

MySQL创建表报错

CREATE TABLE IF NOT EXISTS nhooo_b1 (nhooo_id INT UNSIGNED AUTO_INCREMENT,nhooo_title VARCHAR(100) NOT NULL,nhooo_author VARCHAR(40) NOT NULL,submission_date DATE,PRIMARY KEY (nhooo_id) ) ENGINEINNODB DEFAULT CHARSETutf8;创建表始终报以下错误&#xff1a; 这…

Linux操作系统调度基本准则和实现

今天分享一篇处理器调度相关的理论介绍文章。 1&#xff0c;基本概念 在多道程序系统中&#xff0c;进程的数量往往多于处理机的个数&#xff0c;进程争用处理机的情况就在所难免。处理机调度是对处理机进行分配&#xff0c;就是从就绪队列中&#xff0c;按照一定的算法&…

k8s-ingress-context deadline exceeded

报错&#xff1a; rancher-rke-01:~/rke # helm install rancher rancher-latest/rancher --namespace cattle-system --set hostnamewww.rancher.local Error: INSTALLATION FAILED: Internal error occurred: failed calling webhook "validate.nginx.ingress.kube…

【使用Node.js搭建自己的HTTP服务器】

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…