详解和实现数据表格中的行数据合并功能
theme: smartblue
前言
需求场景:
在提供了数据查看和修改的表格视图中(如table、a-table等…),允许用户自行选择多行数据,依据当前状态进行特定列数据的合并操作。选中的数据将统一显示为选中组的首条数据值。同时,页面会即时反馈显示合并后的效果,提供直观的操作反馈。
效果

方案选型
依赖库:vxe-table(:merge-cells="mergeCells"用作效果展示)
核心逻辑
根据数据行中的mergeId是否相等判断是否有过合并操作,前端执行合并操作后需将合并的数据的mergeId设置为相同的数值,并将选中数据中需要合并的数据项置为第一行选中的数据,并在页面展示合并后的效果。
保证两个一致:
- 数据一致性(数据覆盖) 优先级:极高
- 展示一致性(根据mergeId调整展示) 优先级:高
数据源举例
描述: 常规的后端返回结构,数组对象,数组中每一项指代每一条数据。
列表数据示例:
data:[
{mergeId:1,...},
{mergeId:2,...},
{mergeId:3,...}
]
合并逻辑:
- 数据一致性
coverParams:需要覆盖的参数名,存在于列表数据中
firstData:第一条数据
selectRows:选中的数据集合
coverParams.forEach(item => {for (let i = 1; i < number; i++) {// 选中的数据都覆盖第一条数据的值selectRows[i][item] = firstData[item];// }}});
- 展示一致性
newCurrentRows:由于选择时的随机性和数据结构的不稳定性,记录点击的位置点,并将位置点排序记录。
// 生成正序数组newCurrentRowsconst newCurrentRows = currentRows.sort((a, b) => a - b);
// 若newCurrentRows数据不连续 则将选中数据都置为队尾const isEqual = newCurrentRows.every((value, index, array) => {if (index === 0) {return true;} else {return value === array[index - 1] + 1;}})
情况1:选中的数据连续
coverCols:需要合并的行号组,字段的展示位置,用作生成mergeCells
firstRow:第一行位置
number:对应rowspan,得到跨几行的数据
// 获取选中了几条数据const number = state.selectRows.length;// 取第一个行号const firstRow = newCurrentRows[0];
if (isEqual) {
const mergeCellsArr = [];coverCols.forEach(item => {mergeCellsArr.push({row: firstRow,col: item,rowspan: number,colspan: 1});});mergeCells.value = mergeCellsArr;
}
情况2:选中的数据不连续
核心处理:将不连续的数据处理取出放置队尾,满足连续条件继续操作。
// 非选中的数据const fristElements = [];// 选中的数据集合const secondElements = [];// // 选中的数据置于队尾// // 遍历原始数组const dataNumber = dataSource.value.length;for (let i = 0; i < dataNumber; i++) {// 如果i在 newCurrentRows中不存在,则将其置于fristElements前列if (!newCurrentRows.includes(i)) {fristElements.push(dataSource.value[i]);}// // 如果i在 newCurrentRows中存在,则将其置于fristElements后列if (newCurrentRows.includes(i)) {secondElements.push(dataSource.value[i]);}}const newSecondElements = secondElements.map(item => {return {...item};});// 将新数组的元素追加到原始数组的末尾dataSource.value = fristElements.concat(newSecondElements);
存在合并标识的数据处理
主要用作数据中存在mergeId标记如何展示合并效果。
// 初始数据根据mergeId组装合并效果const baseDataMerge = () => {// coverCols 需要合并的列号 注塑全新const baseCoverCols = getCoverCols();// length 需要合并的行数const mergedCells = [];dataSource.value.forEach((row, rowIndex) => {//检查当前行的mergeId是否和下一行的mergeId一样 且mergeId存在if (rowIndex < dataSource.value.length - 1 &&row.mergeId === dataSource.value[rowIndex + 1].mergeId &&row.mergeId !== undefined) {// 仅在第一次符合条件时 判断横跨几行 默认跨两行if (dataSource.value[rowIndex + 3] &&row.mergeId === dataSource.value[rowIndex + 3].mergeId) {// 横跨3行state.mergeLength = 4;} else if (dataSource.value[rowIndex + 2] &&row.mergeId === dataSource.value[rowIndex + 2].mergeId) {// 横跨4行state.mergeLength = 3;} else {// 横跨2行state.mergeLength = 2;}baseCoverCols.forEach(item => {mergedCells.push({row: rowIndex, // 开始行,由符合条件的rowspan: state.mergeLength, // 合并行数,由选中的数据条数决定col: item,colspan: 1});});state.mergeFlag = true;}});console.log('初始数据合并效果', mergedCells);return mergedCells;};
相关文章:
详解和实现数据表格中的行数据合并功能
theme: smartblue 前言 需求场景: 在提供了数据查看和修改的表格视图中(如table、a-table等…),允许用户自行选择多行数据,依据当前状态进行特定列数据的合并操作。选中的数据将统一显示为选中组的首条数据值。同时,页面会即时反…...
深度学习-05-反向传播理论知识
深度学习-05-反向传播理论知识 本文是《深度学习入门2-自製框架》 的学习笔记,记录自己学习心得,以及对重点知识的理解。如果内容对你有帮助,请支持正版,去购买正版书籍,支持正版书籍不仅是尊重作者的辛勤劳动…...
黑马程序员——Spring框架——day04——SpringMVC基础
目录: SpringMVC简介 背景SpringMVC概述技术体系定位快速入门 目的需求步骤代码实操测试工具 PostMan简介PostMan安装PostMan使用知识点总结请求与参数处理 请求路径 环境准备问题分析解决方式请求方式 环境准备技术分析参数 基本数据类型POJO嵌套POJO数组集合&…...
SpaceX间接「颠覆」了手机?星链如何直连手机通信?
SpaceX 旗下的星链项目推出了一个极具颠覆性的技术——direct to cell(DTC),即通过卫星直接与手机建立通信。这项技术无需对手机进行任何改装,大多数普通手机都可以直接接入星链的卫星网络,实现全球范围内的手机信号覆…...
初识C++ · 模拟实现stack和Queue
目录 前言: 1 Stack 1.1 双端队列 2 Queue 前言: 经历了list三个自定义类型的洗礼,来个简单的放松放松,即栈和队列: 文档记录的,栈和队列是一种容器适配器,它们不属于stl,但是它…...
MFC工控项目实例之一主菜单制作
1、本项目用在WIN10下安装的vc6.0兼容版实现。创建项目名为SEAL_PRESSURE的MFC对话框。在项目res文件下添加相关256色ico格式图片。 2、项目名称:密封压力试验机 主菜单名称: 系统参数 SYS_DATA 系统测试 SYS_TEST 选择型号 TYP_CHOICE 开始试验 TES_STA…...
JVMの堆、栈内存存储
1、JVM栈的数据存储 通过前面的学习,我们知道,将源代码编译成字节码文件后,JVM会对其中的字节码指令解释执行,在解释执行的过程中,又利用到了栈区的操作数栈和局部变量表两部分。 而局部变量表又分为一个个的槽位&…...
二叉树—堆(C语言实现)
一、树的概念及结构 1.树的概念 树是一种非线性的数据结构,它是有n(n > 0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一颗倒挂的树,也就是说它是根朝上,而叶朝下。 ● 有一个特殊的结点…...
儿童有声挂图的芯片AD156—云信通讯
有声挂图是一种结合了图像和声音的媒体形式,用户可以触发图像上的声音,从而获得与图像内容相关的音频信息。这种融合了视觉和听觉的交互方式,既满足了人们对美感和观感的需求,又提高了信息传递的效果和效率。 有声挂图作为孩子的…...
AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.04.25-2024.05.01
文章目录~ 1.Soft Prompt Generation for Domain Generalization2.Modeling Caption Diversity in Contrastive Vision-Language Pretraining3.Q-GroundCAM: Quantifying Grounding in Vision Language Models via GradCAM4.HELPER-X: A Unified Instructable Embodied Agent t…...
gdb调试常见指令
quit:退出gdb list/l:l 文件名:行号/函数名,l 行号/函数名 b:b 文件名:行号/函数名,b 行号/函数名 info/i: info b d:d 断电编号 disable/enable 断电编号:使能(关闭࿰…...
二进制安装mysql8.1
MySQL的安装各个版本步骤几乎一致,本文以安装8.1为例 创建用户及安装需要的依赖包 创建用户及用户组 groupadd mysql useradd -g mysql -s /sbin/nologin mysql 安装依赖包 apt install libncurses5 libncursesw5 libaio1 numactl wget -y 获取二进制包 可以…...
前端工程化工具系列(六)—— VS Code(v1.89.1):强大的代码编辑器
VS Code(Visual Studio Code)是一款由微软开发的强大且轻量级的代码编辑器,支持多种编程语言,并提供了丰富的扩展插件生态系统。 这里主要介绍如何使用配置 ESLint、Stylelint 等插件来提升开发效率。 1 自动格式化代码 最终要…...
重学java 59.Properties属性集集合嵌套集合下总结
不要咀嚼小小悲观,而忘掉整个世界 —— 24.6.3 一、Properties集合(属性集) 1.概述 Properties 继承 于HashTable 2.特点 a、key唯一,value可重复 b、无序 c、无索引 d、线程安全 e、不能存null键,null值 f、Propertie…...
Kafka系列之高频面试题
基础 简介 特点: 高吞吐、低延迟:kafka每秒可以处理几十万条消息,延迟最低只有几毫秒,每个Topic可以分多个Partition,Consumer Group对Partition进行Consumer操作可扩展性:Kafka集群支持热扩展持久性、可…...
SIP通话分析
20240603 - 引言 分析SIP协议的时候,发现了几个问题。虽然说,从整体上来看这个SIP的通话流程也没麻烦,实际上从RFC的概述部分就已经基本上就已经了解了全貌。但在实际的场景中,很多字段起到的作用就不太一样了。 虽然一开始的时…...
【SVG 生成系列论文(九)】如何通过文本生成 svg logo?IconShop 模型推理代码详解
SVG 生成系列论文(一) 和 SVG 生成系列论文(二) 分别介绍了 StarVector 的大致背景和详细的模型细节。SVG 生成系列论文(三)和 SVG 生成系列论文(四)则分别介绍实验、数据集和数据增…...
有哪些兼职软件一天能赚几十元?盘点十个能长期做下去的挣钱软件
在当今这个信息泛滥的时代,众人纷纷寻求迅速致富的捷径。许多人在从事兼职或副业时,并不期望取得巨大的成就,只要每天能额外收入数十元,便已心满意足。 今天,我将带领大家深入探究,揭开那些隐藏在日常生活…...
ubuntu 22.04配置静态ip
ubuntu 22.04配置静态ip vim /etc/netplan/01-network-manager-all.yaml# Let NetworkManager manage all devices on this system network:renderer: NetworkManagerethernets:enp4s0f1:addresses:- 192.168.1.18/24dhcp4: falseroutes:- to: defaultvia: 192.168.1.1nameser…...
C++ 使用 nlohmann/json 库
C常用 json 库有: Jsoncpp boost ison Qt Json (不推荐使用) nlohman::json (推荐使用) 其中Qt中json解析的相关类只在qt中有用,为了避免以后不用qt无法解析json,建议使用nlohmann/json,适用于任何C框架。 1. 简介 nlohmann是一…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
