el-table 跨页多选

news2024/11/26 20:18:56

步骤一

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

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

<el-table
   :data="tableData"
   ref="multipleTable"
   border
   style="width: 100%"
   :row-key="getRowKeys"
   @selection-change="handleSelectionChange"
 >
    <el-table-column
        type="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.coloradmin.cn/o/1296350.html

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

相关文章

【iOS】数据持久化(三)之SQLite3数据库

目录 数据库简介什么是SQLite&#xff1f;在Xcode引入SQLite APISQL语句的种类存储字段类型 SQLite的使用创建数据库创建表和删表数据表操作增&#xff08;插入数据INSERT&#xff09;删&#xff08;删除数据DELETE&#xff09;改&#xff08;更新数据UPDATE&#xff09;查&…

深度学习还可以从如下方面进行创新!!

文章目录 一、我认为可以从如下5个方向进行创新总结 一、我认为可以从如下5个方向进行创新 新的模型结构&#xff1a;尽管现在的深度学习模型已经非常强大&#xff0c;但是还有很多未被探索的模型结构。探索新的模型结构可以带来更好的性能和更低的计算成本。 新的优化算法&a…

[渗透测试学习] Devvortex - HackTheBox

文章目录 信息搜集解题步骤提交flag 信息搜集 扫描端口 nmap -sV -sC -p- -v --min-rate 1000 10.10.11.242发现80端口有http服务&#xff0c;并且是nginx服务 尝试访问web界面&#xff0c;发现跳转到http://devvortex.htb/无法访问 我们用vim添加该域名即可 sudo vim /etc/…

fatal error: sql.h: No such file or directory的解决办法

Ubuntu环境下运行命令 sudo apt install unixodbc-dev 来源&#xff1a;https://github.com/mkleehammer/pyodbc/issues/441

HHDESK右键管理简介

在HHDESK管理文件&#xff0c;除了基本的打开、删除、复制、粘贴、重命名外&#xff0c;还有多种便捷编辑方式。 可以分别以下列模式打开文档&#xff1a; 文本模式即是以文本编辑器打开文档。 1 二进制模式 可进行二进制编辑。 2 JSON模式 可对JSON文件进行直观的解析…

图空图床图片外链系统源码-支持自定义权限策略-图片大小格式

含视频搭建教程。 大致功能&#xff1a; 支持本地等多种第三方云储存 AWS S3、阿里云 OSS、腾讯云 COS、七牛云、又拍云、SFTP、FTP、WebDav、Minio多种数据库驱动支持&#xff0c;MySQL 5.7、PostgreSQL 9.6、SQLite 3.8.8、SQL Server 2017支持配置使用多种缓存驱动&#xff…

免费的数据采集软件,最新免费的几款数据采集软件【2024】

在当今数字化时代&#xff0c;数据是企业决策和业务发展的关键。而如何高效获取数据成为许多企业和研究机构的关注焦点。本文将深入探讨数据采集软件的种类。帮助大家选择最适合自己需求的数据采集工具。 数据采集软件种类 在众多数据采集软件中&#xff0c;有一类强大而多样…

微信小程序 - PC端选择ZIP文件

微信小程序 - PC端选择文件 分享代码片段场景分析解决思路附魔脚本chooseMediaZip 选择附魔后的ZIP文件相关方法测试方法 参考资料 分享代码片段 不想听废话的&#xff0c;直接看代码。 https://developers.weixin.qq.com/s/UL9aojmn7iNU 场景分析 如果你的微信小程序需要选…

【深度学习】强化学习(二)马尔可夫决策过程

文章目录 一、强化学习问题1、交互的对象2、强化学习的基本要素3、策略&#xff08;Policy&#xff09;4、马尔可夫决策过程1. 基本元素2. 交互过程的表示3. 马尔可夫过程&#xff08;Markov Process&#xff09;4. 马尔可夫决策过程&#xff08;MDP&#xff09;5. 轨迹的概率计…

蓝牙物联网对接技术难点有哪些?

#物联网# 蓝牙物联网对接技术难点主要包括以下几个方面&#xff1a; 1、设备兼容性&#xff1a;蓝牙技术有多种版本和规格&#xff0c;如蓝牙4.0、蓝牙5.0等&#xff0c;不同版本之间的兼容性可能存在问题。同时&#xff0c;不同厂商生产的蓝牙设备也可能存在兼容性问题。 2、…

联邦多任务蒸馏助力多接入边缘计算下的个性化服务 | TPDS 2023

联邦多任务蒸馏助力多接入边缘计算下的个性化服务 | TPDS 2023 随着移动智能设备的普及和人工智能技术的发展,越来越多的分布式数据在终端被产生与收集&#xff0c;并以多接入边缘计算(MEC)的形式进行处理和分析。但是由于用户的行为模式与服务需求的多样,不同设备上的数据分布…

Navicat 技术指引 | 连接 GaussDB 分布式

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…

Django的logging-日志模块的简单使用方法

扩展阅读&#xff1a; Python-Django的“日志功能-日志模块(logging模块)-日志输出”的功能详解 现在有下面的Python代码&#xff1a; # -*- coding: utf-8 -*-def log_out_test(content_out):print(content_out)content1 "i love you01" log_out_test(content1)现…

用C++实现队列顺序结构的基本操作

//队列顺序结构的基本操作&#xff1a; #include"stdio.h" #include"String" #define QueueSize 100 typedef char ElemType; typedef struct { ElemType data[QueueSize]; /*保存队中元素*/int front,rear; /*队头和队尾指针*/ } SqQueue; void Init…

android项目实战之编辑器集成

引言 项目需要用到编辑器&#xff0c;采用RichEditor&#xff0c;如下效果 实现 1. 引入库2 implementation jp.wasabeef:richeditor-android:2.0.0 2. XML <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width&q…

【计算机网络】应用层电子邮件协议

一、电子邮件系统架构 电子邮件是一个典型的异步通信系统&#xff0c;发送方从UA&#xff0c;也就是邮件客户端&#xff0c;通过应用层SMTP协议&#xff0c;传输层tcp协议&#xff0c;发送给发送方的邮件服务器&#xff0c;比如使用的是163邮箱&#xff0c;163提供的SMTP服务器…

C++ day59 下一个更大元素Ⅱ 接雨水

题目1&#xff1a;503 下一个更大元素Ⅰ 题目链接&#xff1a;下一个更大元素Ⅱ 对题目的理解 返回循环数组中每个元素的下一个更大元素&#xff0c; 数字x的下一个更大元素是循环等的搜索它的最近的下一个更大的数 数组的中至少有一个元素 本题难点在于循环遍历这里&…

基于深度学习yolov5实现安全帽人体识别工地安全识别系统-反光衣识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 实现安全帽人体识别工地安全识别系统需要使用深度学习技术&#xff0c;特别是YOLOv5算法。下面是对基于YOLOv5实现安…

[mac系统]利用换行符查找替换^p 报错 --caption_column‘ calue ‘test‘ needs to be one of: image

报错内容 代码内容 args.image_column "image" args.caption_column "text" 问题原因&#xff1a; 训练过程需要blip文件是metadata.json格式 ​ 测试过程需要的文件是txt格式 blip.txt​ ​ 解决办法 1 利用word查找替换 用{"file_name": &…

银行卡二要素API的应用案例:从在线购物到金融投资

引言 随着互联网技术的不断发展&#xff0c;人们的金融需求也在不断增加。随之而来的是各种新型金融服务的涌现&#xff0c;让用户的金融体验更加便利快捷。其中&#xff0c;银行卡二要素API的应用&#xff0c;则为用户的金融体验和安全性提供了极大的保障。 银行卡二要素API…