el-table合并单元行后的多选框选中问题

news2024/12/28 19:59:27

问题描述 

合并单元行以后,首列的多选框也会合并,此时选中该多选框其实是只选中了合并单元行的第一行的多选框,其他的都未被选中。

解决方案

原本想着手动去修改表头的半选状态和全选状态 ,但是没有找到相关方法,后面觉得不如直接把合并单元行里其他几行也同时选中,这样操作比较简单且不容易出错。

手动修改多选框状态的方法为 toggleRowSelection()

我们是在选中单元行的多选框时才会去调用这个方法,所以该方法需要在 @select里面去操作,然后在 @selection-change里面去处理选中的数据(比如存储起来)。

我们点击合并行的多选框,其实只是选中了合并行里第一行的多选框,然后让合并行内的其他行数据同步去修改多选框状态。然后在 @selection-change里面打印获取的数据。

可以看到是有效果的了,但是!获取的数据不对!

而且取消选中以后数据也是不对!

所以我对方法进行了检查。

 然后再进行操作。

从后台打印可以看出来,设想中的第一次打印结果出现在最后一次,所以我进行大胆的猜测:

原本想的是:选中多选框修改状态触发@selection-change的绑定方法打印第一条数据,然后再执行@select绑定的方法,去循环修改其他行的状态,然后每次修改状态都触发@selection-change的绑定方法去打印第二条,第三条,第四条数据。也就是第一行状态修改触发@selection-change =》第二行状态修改触发@selection-change =》第三行状态修改触发@selection-change =》第四行状态修改触发@selection-change

其实应该是:选中多选框以后修改状态,然后触发@select绑定的方法去循环修改其他行的状态,在第一次循环的时候第一行和第二行状态都已经选中了,所以打印两条数据,然后第二次循环、第三次循环打印三条数据、四条数据。最后!在都循环完以后!又触发了一次@selection-change事件!这是第一行修改状态时触发的事件!只不过被放在了最后触发!因为第一行修改完状态以后先触发@select的事件,然后在里面修改了第二行的状态触发了@selection-change的事件,这也解释了为什么第一次打印会有两条数据。所以其实是 第一行状态修改 =》第二行状态修改触发@selection-change =》第三行状态修改触发@selection-change =》第四行状态修改触发@selection-change =》最后触发第一行的@selection-change事件。

所以思路也很明确了,让第二次、第三次、第四次触发延后,让第一次触发先开始,所以我们要让循环方法延后执行。

效果实现了,打印的数据也对了。

取消选中的打印数据也是正确的。

这是我自己的一些不成熟的解决思路,如果有更好的方法,欢迎讨论

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

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

相关文章

电脑缺失libcurl.dll怎么解决?详解电脑libcurl.dll文件丢失问题

一、libcurl.dll文件丢失的原因 libcurl.dll是一个用于处理URL传输的库文件,广泛应用于各种基于网络的应用程序。当这个文件丢失时,可能会导致相关应用程序无法正常运行。以下是libcurl.dll文件丢失的一些常见原因: 软件安装或卸载不完整&a…

图文教程:使用PowerDesigner导出数据库表结构为Word/Html文档

1、第一种情况-无数据库表,但有数据模型 1.1 使用PowerDesigner已完成数据建模 您已经使用PowerDesigner完成数据库建模,如下图: 1.2 Report配置和导出 1、点击:Report->Reports,如下图: 2、点击&…

UE--如何用 Python 调用 C++ 及蓝图函数

前言 先讲下如何用 Python 调用 C 函数吧。 详细可见我的上篇文章 最关键的一点就是得在函数上加一个宏:UFUNCTION(BlueprintCallable) UFUNCTION(BlueprintCallable) static bool GetOrCreatePackage(const FString& PackagePath, UPackage*& OutPackag…

小程序租赁系统开发的优势与实践探索

内容概要 小程序租赁系统开发正在引起广泛关注,特别是在数字化快速发展的今天。很多企业开始意识到,小程序不仅能为他们带来更多的客户,还能极大地提高管理效率。借助小程序,用户在租赁时可以更加方便地浏览和选择产品&#xff0…

闲谭Scala(3)--使用IDEA开发Scala

1. 背景 广阔天地、大有作为的青年,怎么可能仅仅满足于命令行。 高端大气集成开发环境IDEA必须顶上,提高学习、工作效率。 开整。 2. 步骤 2.1 创建工程 打开IDEA,依次File-New-Project…,不好意思我的是中文版:…

富芮坤FR800X系列之PWM输出程序应用设计

文章目录 前言1.设计背景2.简介3.如何设计控制调光的接口呢4.硬件设计5.软件设计5.1.软件流程图5.2.软件代码 6.小结 前言 版权归作者所有、未经允许、请勿转载。 读者对象: 本文档主要适用以下工程师: 嵌入式系统工程师 单片机软件工程师 IOT固…

node-js Express防盗链

什么是防盗连 一个简单的说明,假如在前端img标签想要引用图片网站上的图片,当你将图片地址放到img标签上想要显示的时候你发现,图片显示不了,这说明网站采用了防盗链。 怎么实现的呢 在请求头中一般会有 Referer,它…

使用ArcGIS/ArcGIS pro绘制六边形/三角形/菱形渔网图

在做一些尺度分析时,经常会涉及到对研究区构建不同尺度的渔网进行分析,渔网的形状通常为规则四边形。构建渔网的方法也很简单,使用ArcGIS/ArcGIS Pro工具箱中的【创建渔网/CreateFishnet】工具来构建。但如果想构建其他形状渔网进行相关分析&…

RabbitMQ工作模式(详解 工作模式:简单队列、工作队列、公平分发以及消息应答和消息持久化)

文章目录 十.RabbitMQ10.1 简单队列实现10.2 Work 模式(工作队列)10.3 公平分发10.4 RabbitMQ 消息应答与消息持久化消息应答概念配置 消息持久化概念配置 十.RabbitMQ 10.1 简单队列实现 简单队列通常指的是一个基本的消息队列,它可以用于…

nexus docker安装

#nexus docker 安装 docker pull sonatype/nexus3 mkdir -p /data/nexus-data docker run -itd -p 8081:8081 --privilegedtrue --name nexus3 \ -v /data/nexus-data:/var/nexus-data --restartalways docker.io/sonatype/nexus3 #访问 http://192.168.31.109:8081/ 用户名&am…

ADC(二):外部触发

有关ADC的基础知识请参考标准库入门教程 ADC(二):外部触发 1、TIM1的CC1事件触发ADC1DMA重装载2、TIM3的TRGO事件(的更新事件)触发ADC1DMA重装载3、TIM3的TRGO事件(的捕获事件)触发ADC1DMA重装载4、优化TIM3的TRGO事件(的捕获事件)触发ADC1D…

【产品应用】一体化无刷电机在旋转等离子喷枪中的应用

在现代工业制造与加工领域,等离子喷枪凭借其高温、高速的等离子射流,能够实现高效的材料表面处理、切割以及焊接等工艺,在众多行业中发挥着关键作用。而一体化无刷电机的应用,更是为等离子喷枪的性能提升和稳定运行注入了强大动力…

ElasticSearch - 深入解析 Elasticsearch Composite Aggregation 的分页与去重机制

文章目录 Pre概述什么是 composite aggregation?基本结构after 参数的作用问题背景:传统分页的重复问题after 的设计理念响应示例 after 如何确保数据不重复核心机制Example步骤 1: 创建测试数据创建索引插入测试数据 步骤 2: 查询第一页结果查询第一页返…

易基因: BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性|Exp Mol Med

大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 肝细胞癌(hepatocellular carcinoma,HCC)早期复发仍然是一个具有挑战性的领域,其中涉及的机制尚未完全被理解。尽管微血管侵犯&#xff08…

顶会评测集解读-AlignBench: 大语言模型中文对齐基准

评测集社区 CompssHub 作为司南 OpenCompass大模型评测体系的重要组成部分,致力于简化并加快研究人员和行业人士搜索和使用评测集的过程。评测集社区 CompssHub 目前已收录了学科、推理、知识、代码等12个方向的评测集,欢迎大家探索。 为了将评测集社区…

量子退火与机器学习(1):少量数据求解未知QUBO矩阵,以少见多

文章目录 前言ー、复习QUBO:中药配伍的复杂性1.QUBO 的介入:寻找最佳药材组合 二、难题:QUBO矩阵未知的问题1.为什么这么难? 三、稀疏建模(Sparse Modeling)1. 欠定系统中的稀疏解2. L1和L2的选择: 三、压缩感知算法(C…

Linux应用软件编程-多任务处理(线程)

线程:轻量级的进程,线程的栈区独立(8M),与同一进程中的其他线程共用进程的堆区,数据区,文本区。 进程是操作系统资源分配的最小单位;线程是cpu任务调度的最小单位。 1. 线程的创建…

IKAnalyzer分词组件

IKAnalyzer是一个功能强大、易于使用、性能优异的中文分词工具包&#xff0c;适用于各种需要进行中文分词的场景&#xff0c;如搜索引擎、自然语言处理、文本挖掘等。 Springboot如何集成IKAnalyzer分词组件 引入IKAnalyzer分词组件包 <dependency><groupId>org…

微信小程序 不同角色进入不同页面、呈现不同底部导航栏

遇到这个需求之前一直使用的小程序默认底部导航栏&#xff0c;且小程序默认入口页面为pages/index/index&#xff0c;要使不同角色呈现不同底部导航栏&#xff0c;必须要在不同页面引用不同的自定义导航栏。本篇将结合分包&#xff08;subPackages&#xff09;展开以下三步叙述…

输入框去掉角标

前言 正常情况下&#xff0c;HTML textarea 多行文本输入框会存如下图所示图标&#xff0c; 用户可拉动它改变高度&#xff0c;这是我们不想看到的&#xff0c;所以要去掉它。 去掉后&#xff1a; 解决方案 设置 resize 属性即可&#xff0c;如下代码所示&#xff1a; <…