el-table行合并及合并后序号处理

 效果图

      <el-tableclass="ncky-detail-table"v-loading="tableLoading"border:data="tableDataVo":span-method="objectSpanMethod"row-key="uniqueFlag":row-class-name="tablerowclassname"><el-table-column label="序号" width="50" align="center" prop="rowId" />   ...</el-table>
合并行、列
getSpanArr(data) {let _spanArr = [];let rowId = 0;//存储序号// 遍历数据for (let i = 0; i < data.length; i++) {// 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0if (i === 0) {_spanArr.push(1);this.pos = 0;data[i].rowId = 1;//序号合并} else {// 判断当前元素与上一个元素是否相同if (data[i].infoId === data[i - 1].infoId) {// 如果相同就将索引为 pos 的值加一_spanArr[this.pos] += 1;// 且将数组添加 0_spanArr.push(0);} else {// 如果元素不同了,就可以通过索引为 pos 的值知晓应该需要合并的行数// 同时,我们再次添加一个值1,表示重新开始判断重复姓名的次数_spanArr.push(1);// 同时 索引加一this.pos = i;rowId++;data[i].rowId = rowId + 1;}}}this.spanArr = _spanArr;
},      objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex < 6 || columnIndex === 9 || columnIndex === 10 || columnIndex === 15 || columnIndex === 16) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}
},// 表格行样式背景颜色
tablerowclassname({ row, rowIndex }) {if (a != b) {return 'warning-row';}
},

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

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

相关文章

vue-echarts高度缩小时autoresize失效

背景 项目中采用动态给x-vue-echarts style赋值width&#xff0c;height的方式实现echarts图表尺寸的改变 <v-chart...autoresize></v-chart>给v-chart添加autoresize后&#xff0c;在图表宽度变化&#xff0c;高度增加时无异常&#xff0c;高度减小时图表并未缩…

Ubuntu 挂载目录

1. 临时挂载&#xff08;重启后失效&#xff09; 创建挂载点&#xff1a; $ sudo mkdir -p /work临时挂载磁盘到 work 目录&#xff1a; $ sudo mount /dev/nvme0n1p1 /work验证挂载是否成功&#xff1a; $ df -h /work此方法挂载在系统重启后会失效&#xff0c;需手动重新挂载…

厦门凯酷全科技有限公司正规吗靠谱吗?

随着短视频和直播电商的迅猛发展&#xff0c;越来越多的企业开始将目光投向抖音这一平台。作为国内领先的短视频社交平台&#xff0c;抖音凭借其庞大的用户基础和强大的算法推荐系统&#xff0c;成为众多品牌拓展市场、提升销售的重要渠道。厦门凯酷全科技有限公司&#xff08;…

【笔记】C语言转C++

网课链接&#xff1a;【C语言 转 C 简单教程】 https://www.bilibili.com/video/BV1UE411j7Ti/?p27&share_sourcecopy_web&vd_source4abe1433c2a7ef632aeed6a3d5c0b22a 网课老师B站id:别喷我id 视频总时长&#xff1a;01:55:27 以下笔记是我通过此网课整理 建议先…

WireShark 下载、安装和使用

1、下载 官网下载太慢&#xff0c;本人另外提供下载地址【下载WireShark】 2、安装 全部默认下一步即可&#xff0c;但如下图所示的这一步值得拿出来说一下。这一步是要你安装Npcap&#xff0c;但是你的电脑如果已经安装了WinPcap&#xff0c;那么可以选择不再安装Npcap。Npca…

STM32模拟I2C通讯的驱动程序

目录 STM32模拟I2C通讯的驱动程序 开发环境 引脚连接 驱动程序 STM32模拟I2C通讯的驱动程序 开发环境 立创天空星开发板、主控芯片为STM32F407VxT6 引脚连接 使用stm32的PB9引脚模拟I2C时钟线SCL、PB8引脚模拟I2C数据线SDA 驱动程序 i2c.h文件如下&#xff1a;#ifndef…

Qt自定义类型在信号槽中的使用

引言 示例自定义数据类型信号槽效果检查代码注册自定义类型信号槽使用QVariant传递参数总结附加绑定信号槽,传递的参数如果是自定义类型的变量,槽函数不会响应。为什么呢?是因为自定义类型没有被写入元对象系统,对于Qt来说,不认识这个数据类型,Qt是以事件来驱动的,信号槽…

电子应用设计方案-50:智能牙刷系统方案设计

智能牙刷系统方案设计 一、引言 随着人们对口腔健康的重视程度不断提高&#xff0c;智能牙刷作为一种创新的口腔护理工具&#xff0c;能够更有效地帮助用户改善刷牙习惯和清洁效果。本方案旨在设计一款功能丰富、智能化程度高的智能牙刷系统。 二、系统概述 1. 系统目标 - 准…

2024年最新 Docker 安装 Nginx 容器 (完整详细版) 2025年最新

Docker 安装 Nginx 容器 (完整详细版) 本文详细介绍了Docker的安装步骤&#xff0c;包括如何从官方镜像仓库下载Nginx镜像&#xff0c;如何检查已下载的镜像。接着&#xff0c;讲解了创建Nginx配置文件的必要性&#xff0c;并提供了创建挂载目录的命令。然后&#xff0c;展示了…

【代码随想录day58】【C++复健】 117. 软件构建(拓扑排序);47. 参加科学大会(dijkstra(朴素版)精讲)

117. 软件构建&#xff08;拓扑排序&#xff09; 继续边看解析边做题&#xff0c;思考时的问题做个如下的总结&#xff1a; 1. 存边用什么数据结构&#xff1f; 在题目中&#xff0c;我们需要存储节点之间的依赖关系&#xff08;边信息&#xff09;。选择适合的数据结构非常重…

第九篇:k8s 通过helm发布应用

什么是helm&#xff1f; Helm 是 Kubernetes 的包管理器。Helm 是查找、分享和使用软件构建 Kubernetes 的最优方式。 在红帽系的Linux中我们使用yum来管理RPM包&#xff0c;类似的&#xff0c;在K8s中我们可以使用helm来管理资源对象&#xff08;Deployment、Service、Ingress…

OpenCV相机标定与3D重建(9)相机标定函数calibrateCameraRO()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::calibrateCameraRO 是 OpenCV 中用于相机标定的函数&#xff0c;它允许固定某些点来进行更精确的标定。 函数原型 double cv::calibrateCa…

【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置(上):究竟该用 em 还是 px

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 ✔️ 12.1.1 使用 em 还是 px ✔️12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 文章目录 第 12 章 排版与间距…

2024/12/12学习日志

为了更好地记录并反思自己的学习状况&#xff0c;将每日学习的内容、时长、心得等记录于此日志。 于9月3日开始记录&#xff0c;计划每日记录&#xff0c;希望至少能够坚持一个学期。 学习内容&#xff1a; 计组&#xff1a; 计算机架构 硬件的衡量指标&#xff1a;计算 编…

el-thee懒加载删除某条数据 ,el-thee懒加载重置,el-thee刷新某个节点

一、懒加载的tree已经全部展开&#xff0c;外部点击删除的时候不需要重新展开点击获取下一层数据 <template> <el-treeref"tree":data"treeData":props"defaultProps"render-after-expandhighlight-currentlazy:expand-on-click-node&q…

【问题记录】07 MAC电脑,使用FileZilla(SFTP)连接堡垒机不成功

项目场景&#xff1a; 使用MAC电脑&#xff0c;以子账号&#xff08;非root&#xff09;的形式登录&#xff0c;连接堡垒机CLB&#xff08;传统型负载均衡&#xff09;&#xff0c;使用FileZilla&#xff08;SFTP&#xff09;进行FTP文件传输。 问题描述&#xff1a; MAC电脑…

狗为啥会咬自己的尾巴

狗啃咬自己的尾巴&#xff0c;这一现象并非简单的好奇或贪玩之举&#xff0c;其背后可能隐藏着诸多复杂的原因&#xff0c;值得我们深入探究与深思。 从生理层面来看&#xff0c;尾巴部位出现皮肤疾病、寄生虫感染或受伤疼痛是常见诱因。例如&#xff0c;湿疹、跳蚤、蜱虫等问…

【数据结构——栈与队列】顺序栈的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现顺序栈的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取…

Codeforces Round 992 (Div. 2)

传送门&#xff1a;Dashboard - Codeforces Round 992 (Div. 2) - Codeforces A. Game of Division 思路&#xff1a;模拟 AC代码&#xff1a;Submission #295676347 - Codeforces B. Paint a Strip 思路&#xff1a;数学 贪心 放置的位置一定是 1 4 10 22 48 ....…

前端(五)css属性

css属性 文章目录 css属性一、字体属性二、文本属性三、背景属性四、盒子模型 一、字体属性 font-weight&#xff1a;文字粗细&#xff0c;在100到900之间&#xff0c;normal(400),bord(700),inherit(继承父类) font-style&#xff1a;文字风格&#xff0c;normal表示正常(默认…