vue3 el-table 根据id合并指定列单元格

devtools/2025/1/20 20:44:44/

参考文章:https://www.cnblogs.com/gggggggxin/p/14311726.html

在mounted方法中调用 onMergeLines() 

javascript">const onMergeLines = () => {// 先给所有的数据都加一个v.rowspan = 1tableData.value.forEach((item) => {item.rowspan = 1})// 双层循环for (let i = 0; i < tableData.value.length; i++) {// 内层循环,上面已经给所有的行都加了item.rowspan = 1// 这里进行判断// 如果当前行的cid和下一行的cid相等// 就把当前item.rowspan + 1// 下一行的item.rowspan - 1for (let j = i + 1; j < tableData.value.length; j++) {//此处可根据相同字段进行合并,此处是根据的idif (tableData.value[i].id === tableData.value[j].id) {tableData.value[i].rowspan++tableData.value[j].rowspan--}}// 这里跳过已经重复的数据i = i + tableData.value[i].rowspan - 1}
}//合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {//第一列if (columnIndex === 0) {return {rowspan: row.rowspan,colspan: 1}}//第二列if (columnIndex === 1) {return {rowspan: row.rowspan,colspan: 1}}//第三列if (columnIndex === 2) {return {rowspan: row.rowspan,colspan: 1}}//第四列if (columnIndex === 3) {return {rowspan: row.rowspan,colspan: 1}}//最后一列if (columnIndex === 18) {return {rowspan: row.rowspan,colspan: 1}}
}


http://www.ppmy.cn/devtools/152181.html

相关文章

国产化中间件东方通TongWeb环境安装部署(图文详解)

文章目录 前言一、TongWeb部署环境介绍二、安装步骤 1.导入安装包2.安装3.登录网页 总结 前言 中国政府一直致力于促进国内产业的发展和国产化进程。作为全球第二大经济体&#xff0c;中国政府部门在推动国产化方面发挥着至关重要的作用。本文是东方通中间件TongWeb的详细安装…

MongoDB 学习指南与资料分享

MongoDB学习资料 MongoDB学习资料 MongoDB学习资料 在数据爆炸的当下&#xff0c;MongoDB 作为非关系型数据库的佼佼者&#xff0c;以其独特优势在各领域发光发热。无论是海量数据的存储&#xff0c;还是复杂数据结构的处理&#xff0c;MongoDB 都能轻松应对。接下来&#xf…

达梦数据库经验笔记

达梦数据库还算好使&#xff0c;这些年的使用经验留作笔记&#xff0c;给后来人或者同行铺路。 一、服务相关 1.有时候接入会提示“网络异常”&#xff0c;但换成local host也会提示&#xff0c;自己连接本地还会出现网络异常&#xff1f;——此时就代表服务可能没开&#xff…

快速上手 Spring Boot:基础使用详解

快速上手 Spring Boot&#xff1a;基础使用详解 文章目录 快速上手 Spring Boot&#xff1a;基础使用详解 1、什么是SpringBoot2、Springboot快速入门搭建3、SpringBoot起步依赖4、SpringBoot自动配置&#xff1a;以tomcat启动为例5、SpringBoot基础配置6、yaml7、多环境开发配…

利用R计算一般配合力(GCA)和特殊配合力(SCA)

前记 一般配合力(General Combining Ability, GCA)和特殊配合力(Specific Combining Ability, SCA)是杂交育种中用于评估亲本组合潜力的重要概念,具体定义和区别如下: 一般配合力(GCA) 定义:GCA是指一个自交系与其他多个自交系杂交时,其杂交后代在某一性状(如产量)…

cmake foreach 条件判断

格式 foreach(<loop_var> <items>)<commands> endforeach()其中<items>是由空格或空白分隔的项目列表。foreach和匹配的endforeach之间的所有命令都被记录下来而不被调用。一旦计算完endforeach&#xff0c;将为<items>中的每个项目调用一次记录…

网络系统管理Linux环境——StorageSrv之SAMBA

题目要求 服务器StorageSrv上的工作任务 4. SAMBA 创建 samba 共享&#xff0c;本地目录为/data/share1&#xff0c;要求&#xff1a; 共享名为 share1&#xff1b; 仅允许 zsuser 用户能上传文件&#xff1b; 创建 samba 共享&#xff0c;本地目录为/data/public&am…

springboot 利用html模版导出word

1.maven配置 <dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.32</version></dependency> 2.控制层业务代码 GetMapping("/exportConstructionLogDocx") ApiOper…