言简意赅的 el-table 跨页多选

步骤一

 在<el-table>中:row-key="getRowKeys"@selection-change="handleSelectionChange"

 在<el-table-column>中type="selection"那列,添加:reserve-selection="true"

<el-table:data="tableData"ref="multipleTable"borderstyle="width: 100%":row-key="getRowKeys"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55":reserve-selection="true"></el-table-column><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="code" label="设备编号"> </el-table-column><el-table-column prop="name" label="设备名称"> </el-table-column><el-table-column prop="capacity" label="标准产能(kg/天)"></el-table-column><el-table-column prop="shopName" label="车间"> </el-table-column></el-table>

步骤二

methods: {getRowKeys(row) {return row.id;},handleSelectionChange(e) {console.log(e,"被选中数据")this.addDeviceData = e;},
}

提示

在开发过程中,示如我遇到的需求,<el-table> 展示在<el-dialog>弹框中。第二次点击近弹窗,要求数据不选择。那么可以在<el-dialog>弹框关闭时的事件中加上这行代码。

this.$refs.multipleTable.clearSelection(); //取消全部选中

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

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

相关文章

联邦蒸馏中的分布式知识一致性 | TIST 2024

联邦蒸馏中的分布式知识一致性 | TIST 2024 联邦学习是一种隐私保护的分布式机器学习范式&#xff0c;服务器可以在不汇集客户端私有数据的前提下联合训练机器学习模型。通信约束和系统异构是联邦学习面临的两大严峻挑战。为同时解决上述两个问题&#xff0c;联邦蒸馏技术被提…

前端非常好用的免费网页工具推荐(值得收藏)

1、iloveimg 可在线进行图片编辑、压缩、转换等功能&#xff0c;操作方便&#xff0c;完全免费 2、草料二维码 可在线进行文本、网站、文件、图片、微信等二维码生成 3、比特虫 在线制作网站 ico 图标 4、facicongrabber 免费网页 favicon 提取 5、bazhan.wang 在线扒站工…

c/c++ | 位运算 | 使用场景

位运算 &#xff0c;应该是最朴素的逻辑运算 ############################## #按位与&#xff08;&&#xff09; | A | B | A & B | |---|---|-------| | 0 | 0 | 0 | | 0 | 1 | 0 | | 1 | 0 | 0 | | 1 | 1 | 1 |##################################…

Docker知识点整理

Docker和虚拟机技术的区别&#xff1a; 传统的虚拟机&#xff0c;可以虚拟出一条硬件&#xff0c;运行一个完整的操作系统&#xff0c;在这个操作系统上安装和运行所需的软件 容器内的应用可以直接运行在宿主 主机的内核中&#xff0c;容器没有自己的内核&#xff0c;也不用虚…

java导出excel通用工具(POI,类注解形式)

通过给类定义注解(设置名称&#xff0c;设置kv转换值)&#xff0c;然后利用设置的名称和传入的数据进行导出。 只需要在项目添加两个工具类就可以实现excel导出功能。 1、单sheet 步骤&#xff1a;1、根据业务需求定义导出的类&#xff0c;并设置表头名称。 …

【媒体开发】利用FFMPEG进行推拉流

目录 1. 下载并启动媒体服务 2. 使用 FFMPEG 拉流并推送到指定服务地址 3. 客户端拉流 1. 下载并启动媒体服务 MediaMTX&#xff0c;也即之前的rtsp-simple-server&#xff0c;是一个即用型、零依赖的实时媒体服务器和媒体代理&#xff0c;允许发布、读取、代理和记录视频和…

设计模式_行为型模式_观察者模式

行为型模式&#xff1a;主要关注的是对象之间的通信 例如&#xff1a;一个对象调用另一个对象的成员 方法 目的&#xff1a; 观察者-监听者模式&#xff08;发布-订阅模式&#xff09;设计模式&#xff1a;主要关注的是对象的一对多的关系&#xff0c;也就是多个对象都依赖一…

hadoop使用内置包进行性能测试TestDFSIO、NNBench、MRBench、SliveTest

hadoop使用内置包进行性能测试 hadoop使用内置包进行性能测试 hadoop使用内置包进行性能测试TestDFSIO read & writeNNBenchMRBenchSliveTest TestDFSIO read & write TestDFSIO 是一个 Hadoop 自带的基准测试工具&#xff0c;用于测试 HDFS 的读写性能。它会模拟大量…

vue3制作类微信的六位的密码输入框

这是一个 Vue 3 组件&#xff0c;用于创建一个自定义的密码输入框。这个输入框由6个小输入框组成&#xff0c;每个小输入框只能输入一个字符。当用户在一个小输入框中输入字符后&#xff0c;焦点会自动跳到下一个输入框&#xff0c;直到所有6个输入框都填满为止。当6个字符都输…

Scrapy的crawlspider爬虫

scrapy的crawlspider爬虫 学习目标&#xff1a; 了解 crawlspider的作用应用 crawlspider爬虫创建的方法应用 crawlspider中rules的使用 1、crawlspider是什么 回顾之前的代码中&#xff0c;我们有很大一部分时间在寻找下一页的url地址或者是内容的url地址上面&#xff0c;这…

Web安全-SQL注入常用函数(二)

★★实战前置声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将其信息做其他用途&#xff0c;由用户承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、MySQL数据库构成 初始化安装MySQL数据库后(…

智能优化算法应用:基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.模拟退火算法4.实验参数设定5.算法结果6.…

Android---Kotlin 学习007

集合可以方便你处理一组数据&#xff0c;也可以作为值参传给函数&#xff0c;和我们学过的其它变量类型一样&#xff0c;List、Set 和 Map 类型的变量也分为两类&#xff0c;只读和可变。 List创建与元素获取 通过 listOf() 函数创建一个 List 集合。 val listString : List&…

javaWeb文件上传

1.文件上传的应用场景&#xff1a;提交作业 上传头像 提交简历&#xff08;上传附件&#xff09; 上传商品&#xff0c;图书图片 2.文件上传的前台如何编写以及注意事项&#xff1a; 1.肯定需要用到表单 2.文件上传的那一栏需要提供 input的typefil…

UnicodeUtil.java

计算精度问题带根号√ √ UNICODE字符表 package util;import java.util.regex.Matcher; import java.util.regex.Pattern;/*** radical* 根号√运算问题 Unicode * * author ZengWenFeng* email 117791303qq.com* date 2015.04.07*/ public class UnicodeUtil {/*** 字…

ShardingSphere数据分片之读写分离

1、概述 读写分离是一种常见的数据库架构&#xff0c;它将数据库分为主从库&#xff0c;一个主库&#xff08;Master&#xff09;用于写数据&#xff0c;多个从库&#xff08;Slave&#xff09;进行轮询读取数据的过程。主从库之间通过某种通讯机制进行数据的同步。 所以&…

React Native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

前言 本文基于&#xff1a;“react-native” : “^0.73.0” 1.安装 Node Node.js&#xff0c;下载时选择 > 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK)&#xff0c;下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.…

re:Invent 产品体验与感受分享:Amazon ElastiCache Serverless 缓存的即时扩展

授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在亚马逊云科技开发者社区、 知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道&#xff09;。 文章目录 前言产品介绍产品使用步骤1.创建缓存服务2.安全组开放访问权限…

【Python】解读a+=b 和 a=a+b是否一样?看完恍然大悟!

文章目录 前言一、可变对象和不可变对象总结 前言 在Python中&#xff0c;对于可变和不可变对象的行为差异是一个重要概念&#xff0c;特别是在涉及到和操作时。理解这一点对于编写高效且无误的代码至关重要。 一、可变对象和不可变对象 首先&#xff0c;让我们谈谈可变和不可…

【INTEL(ALTERA)】 quartus使用Nios® V 处理器系统仿真失败,没有打印输出消息

说明 在 Synopsys* VCS* 和 VCS* MX 仿真器中模拟由以下位置生成的 Nios V 处理器系统时&#xff0c;可能会出现该问题&#xff1a; 英特尔 Quartus Prime Pro Edition 软件版本 23.1 至 23.4&#xff0c;或 英特尔 Quartus Prime Standard Edition 软件版本 23.1std 这是由…