当前位置: 首页 > news >正文

详解和实现数据表格中的行数据合并功能


theme: smartblue

前言

需求场景:

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

效果

image.png

方案选型

依赖库: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 前言 需求场景&#xff1a; 在提供了数据查看和修改的表格视图中(如table、a-table等…)&#xff0c;允许用户自行选择多行数据&#xff0c;依据当前状态进行特定列数据的合并操作。选中的数据将统一显示为选中组的首条数据值。同时&#xff0c;页面会即时反…...

深度学习-05-反向传播理论知识

深度学习-05-反向传播理论知识 本文是《深度学习入门2-自製框架》 的学习笔记&#xff0c;记录自己学习心得&#xff0c;以及对重点知识的理解。如果内容对你有帮助&#xff0c;请支持正版&#xff0c;去购买正版书籍&#xff0c;支持正版书籍不仅是尊重作者的辛勤劳动&#xf…...

黑马程序员——Spring框架——day04——SpringMVC基础

目录&#xff1a; SpringMVC简介 背景SpringMVC概述技术体系定位快速入门 目的需求步骤代码实操测试工具 PostMan简介PostMan安装PostMan使用知识点总结请求与参数处理 请求路径 环境准备问题分析解决方式请求方式 环境准备技术分析参数 基本数据类型POJO嵌套POJO数组集合&…...

SpaceX间接「颠覆」了手机?星链如何直连手机通信?

SpaceX 旗下的星链项目推出了一个极具颠覆性的技术——direct to cell&#xff08;DTC&#xff09;&#xff0c;即通过卫星直接与手机建立通信。这项技术无需对手机进行任何改装&#xff0c;大多数普通手机都可以直接接入星链的卫星网络&#xff0c;实现全球范围内的手机信号覆…...

初识C++ · 模拟实现stack和Queue

目录 前言&#xff1a; 1 Stack 1.1 双端队列 2 Queue 前言&#xff1a; 经历了list三个自定义类型的洗礼&#xff0c;来个简单的放松放松&#xff0c;即栈和队列&#xff1a; 文档记录的&#xff0c;栈和队列是一种容器适配器&#xff0c;它们不属于stl&#xff0c;但是它…...

MFC工控项目实例之一主菜单制作

1、本项目用在WIN10下安装的vc6.0兼容版实现。创建项目名为SEAL_PRESSURE的MFC对话框。在项目res文件下添加相关256色ico格式图片。 2、项目名称&#xff1a;密封压力试验机 主菜单名称&#xff1a; 系统参数 SYS_DATA 系统测试 SYS_TEST 选择型号 TYP_CHOICE 开始试验 TES_STA…...

JVMの堆、栈内存存储

1、JVM栈的数据存储 通过前面的学习&#xff0c;我们知道&#xff0c;将源代码编译成字节码文件后&#xff0c;JVM会对其中的字节码指令解释执行&#xff0c;在解释执行的过程中&#xff0c;又利用到了栈区的操作数栈和局部变量表两部分。 而局部变量表又分为一个个的槽位&…...

二叉树—堆(C语言实现)

一、树的概念及结构 1.树的概念 树是一种非线性的数据结构&#xff0c;它是有n&#xff08;n > 0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一颗倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下。 ● 有一个特殊的结点…...

儿童有声挂图的芯片AD156—云信通讯

有声挂图是一种结合了图像和声音的媒体形式&#xff0c;用户可以触发图像上的声音&#xff0c;从而获得与图像内容相关的音频信息。这种融合了视觉和听觉的交互方式&#xff0c;既满足了人们对美感和观感的需求&#xff0c;又提高了信息传递的效果和效率。 有声挂图作为孩子的…...

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&#xff1a;退出gdb list/l&#xff1a;l 文件名&#xff1a;行号/函数名&#xff0c;l 行号/函数名 b:b 文件名&#xff1a;行号/函数名&#xff0c;b 行号/函数名 info/i: info b d:d 断电编号 disable/enable 断电编号&#xff1a;使能&#xff08;关闭&#xff0…...

二进制安装mysql8.1

MySQL的安装各个版本步骤几乎一致&#xff0c;本文以安装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&#xff08;Visual Studio Code&#xff09;是一款由微软开发的强大且轻量级的代码编辑器&#xff0c;支持多种编程语言&#xff0c;并提供了丰富的扩展插件生态系统。 这里主要介绍如何使用配置 ESLint、Stylelint 等插件来提升开发效率。 1 自动格式化代码 最终要…...

重学java 59.Properties属性集集合嵌套集合下总结

不要咀嚼小小悲观&#xff0c;而忘掉整个世界 —— 24.6.3 一、Properties集合&#xff08;属性集&#xff09; 1.概述 Properties 继承 于HashTable 2.特点 a、key唯一&#xff0c;value可重复 b、无序 c、无索引 d、线程安全 e、不能存null键&#xff0c;null值 f、Propertie…...

Kafka系列之高频面试题

基础 简介 特点&#xff1a; 高吞吐、低延迟&#xff1a;kafka每秒可以处理几十万条消息&#xff0c;延迟最低只有几毫秒&#xff0c;每个Topic可以分多个Partition&#xff0c;Consumer Group对Partition进行Consumer操作可扩展性&#xff1a;Kafka集群支持热扩展持久性、可…...

SIP通话分析

20240603 - 引言 分析SIP协议的时候&#xff0c;发现了几个问题。虽然说&#xff0c;从整体上来看这个SIP的通话流程也没麻烦&#xff0c;实际上从RFC的概述部分就已经基本上就已经了解了全貌。但在实际的场景中&#xff0c;很多字段起到的作用就不太一样了。 虽然一开始的时…...

【SVG 生成系列论文(九)】如何通过文本生成 svg logo?IconShop 模型推理代码详解

SVG 生成系列论文&#xff08;一&#xff09; 和 SVG 生成系列论文&#xff08;二&#xff09; 分别介绍了 StarVector 的大致背景和详细的模型细节。SVG 生成系列论文&#xff08;三&#xff09;和 SVG 生成系列论文&#xff08;四&#xff09;则分别介绍实验、数据集和数据增…...

有哪些兼职软件一天能赚几十元?盘点十个能长期做下去的挣钱软件

在当今这个信息泛滥的时代&#xff0c;众人纷纷寻求迅速致富的捷径。许多人在从事兼职或副业时&#xff0c;并不期望取得巨大的成就&#xff0c;只要每天能额外收入数十元&#xff0c;便已心满意足。 今天&#xff0c;我将带领大家深入探究&#xff0c;揭开那些隐藏在日常生活…...

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 库有&#xff1a; Jsoncpp boost ison Qt Json (不推荐使用) nlohman::json (推荐使用) 其中Qt中json解析的相关类只在qt中有用&#xff0c;为了避免以后不用qt无法解析json&#xff0c;建议使用nlohmann/json&#xff0c;适用于任何C框架。 1. 简介 nlohmann是一…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...