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

news2024/9/21 5:43:33

步骤一

 在<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/1312096.html

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

相关文章

Linux Shell——(函数)

shell函数 1. 函数定义2. 调用函数 总结 最近学习了shell脚本&#xff0c;记录一下shell函数相关语法 1. 函数定义 语法&#xff1a; [funciton] functionname [()] { 语句 [return] } 函数使用前必须先定义funciton关键字是可选的return关键字也是可选的&#xff0c;如果没有…

ChatGPT如何做科研??

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车&#xff0c;就有可能被淘汰在这个数字化时代&#xff0c;如何能高效地处理文本、文献查阅、PPT…

使用word中的VBA 批量设置Word中所有图片大小

在VBA编辑器中&#xff0c;你可以创建、编辑和运行VBA宏代码&#xff0c;以实现自动化任务和自定义Word 功能。如果你是VBA编程初学者&#xff0c;可以在VBA编辑器中查看Word VBA宏代码示例&#xff0c;以便更好地了解如何使用VBA编写代码。 要打开VBA编辑器&#xff0c;你可以…

压缩软件电脑版哪个好?

压缩软件是我们存储文件、清理电脑、向他人发送文件经常用到的工具&#xff0c;下面就从头到尾操作一遍各个软件压缩步骤&#xff0c;根据需求选择好啦。可以放心的是&#xff0c;这四款软件都经过了安全测试&#xff0c;能够保证文件的安全性&#xff0c;并且能够兼容多种操作…

jmeter,同一线程组内,调用cookie实现接口关联

取cookie方式参考上一篇&#xff1a;jemeter&#xff0c;取“临时重定向的登录接口”响应头中的cookie-CSDN博客 元件结构 登录后要执行的接口为“api/get_event_list/”&#xff0c;在该HTTP请求下创建HTTP信息头管理器&#xff0c;配置如下&#xff1a; 执行测试后&#xff0…

工作遇到问题与解决办法(二)

弹出确认框 this.$confirm(确定删除全部添加的数据吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() > {// 确定操作this.addYpslTempList[];this.isSelectfalse;//删除状态this.addMultiple true;this.$message({type: success,mes…

Android Studio下载及安装和Gradle的配置(非常详细)从零基础入门到精通,看完这一篇就够了

文章目录 下载安装修改Sdk的位置创建项目修改Gradle的位置查看AS版本工具栏–View项工具栏–Build下的功能说明Build Variants视图说明下载模拟器&#xff08;avd&#xff09;/安卓虚拟设备 屏幕熄灭功能关闭虚拟设备功能删除自己开发的应用软件将开发的应用运行到虚拟设备上。…

java全栈体系结构-架构师之路(持续更新中)

Java 全栈体系结构 数据结构与算法实战&#xff08;已更&#xff09;微服务解决方案数据结构模型(openresty/tengine)实战高并发JVM虚拟机实战性能调优并发编程实战微服务框架源码解读集合框架源码解读分布式架构解决方案分布式消息中间件原理设计模式JavaWebJavaSE新零售电商项…

安卓开发显示加载中

private ProgressDialog loadobj; // 显示 ProgressDialog loadobj loadobj.show(MainActivity.this, "正在加载", "请稍后..."); // 取消 ProgressDialog loadobj.dismiss();或者 public ProgressDialog progressDialog;public void loading(){// …

深入探讨用于图像和视频生成的基于transformer的扩散模型

今天这篇文章探索了基于Transformer的扩散模型&#xff0c;用于图像和视频生成。尽管Transformer体系结构因其灵活性和可扩展性&#xff0c;在各个领域占主导地位&#xff0c;但在视觉生成领域&#xff0c;主要使用基于 CNN 的U-Net体系结构&#xff0c;特别是在基于扩散的模型…

MPLS专线和互联网专线有什么区别?如何选择?

MPLS和互联网专线是什么&#xff1f; MPLS专线和互联网专线是企业网络连接的常见方式。MPLS专线基于多协议标签交换&#xff08;MPLS&#xff09;该技术利用专线连接两个或多个分支机构&#xff0c;提供高质量的数据传输服务。互联网专线是基于公共知识产权基础设施的连接方式…

ElementPlus中的分页逻辑与实现

ElementPlus中的分页逻辑与实现 分页是web开发中必不可少的组件&#xff0c;element团队提供了简洁美观的分页组件&#xff0c;配合table数据可以实现即插即用的分页效果。分页的实现可以分成两种&#xff0c;一是前端分页&#xff0c;二是后端分页。这两种分页分别适用于不同…

c/c++ 文件操作(2)

文件操作读和写 顺序读写 1、fgetc、fputc 函数功能fgetc字符输入函数----->对应打开方式是 “r”fputc字符输出函数-----> 对应打开方式是 “w” 2、fgets、fputs 函数功能fgets文本行输入函数------> 对应打开方式是"r"fputs文本行输出函数------>…

社交网络分析2(上):社交网络情感分析的方法、挑战与前沿技术

社交网络分析2&#xff08;上&#xff09;&#xff1a;社交网络情感分析的方法、挑战与前沿技术 写在最前面1. 情感分析的基本概念社交网络情感分析的挑战与应用 情感分析研究现状2. 根据分析的对象&#xff0c;情感分析可以划分为哪几种类型&#xff0c;简要地进行说明。词汇表…

如何测试和挑选 2024 年最佳 Mac 数据恢复软件

数据是无价的。有些具有货币价值&#xff0c;例如您的银行帐户详细信息或官方文件。其他的则具有情感价值且不可替代&#xff0c;例如家庭照片。所有这些都存储在您的硬盘中&#xff0c;任何事情都可能出错。它可能会遇到技术错误&#xff0c;例如恶意软件攻击或驱动器故障&…

认知觉醒(七)

认知觉醒(七) 第三章 元认知——人类的终极能能力 第一节 元认知&#xff1a;成长慢&#xff0c;是因为你不会“飞” 1946年10月24日&#xff0c;一群科学家为了研究太阳的紫外线&#xff0c;在美国新墨西哥州白沙导弹试验场发射了当时世界上最先进的V2液体火箭&#xff0…

RealSense最简单配置环境只需要5分钟,不用自行添加任何包含目录、库目录。Visual Studio2022、C++。

又开始搞点云了&#xff0c;现在用的是Intel的realsense。 看网上步骤都挺繁琐的&#xff0c;本文搭建只需要5分钟。直接用官方提供的属性表&#xff0c;不用自行添加任何包含目录、库目录。 第一分钟&#xff1a;用Visual Studio新建一个工程&#xff08;此时你是没有intel.…

机器学习算法---分类

当然&#xff0c;让我为您提供更详细的机器学习算法介绍&#xff0c;重点在于每种算法的原理、优缺点&#xff0c;并在注意事项中特别提到它们对非平衡数据和高维稀疏数据的适应性。 1. 决策树&#xff08;Decision Trees&#xff09; 原理&#xff1a; 决策树通过学习简单的…

TCP/UDP 协议

目录 一.TCP协议 1.介绍 2.报文格式 ​编辑 确认号 控制位 窗口大小 3.TCP特性 二.TCP协议的三次握手 1.tcp 三次握手的过程 三.四次挥手 2.有限状态机 四.tcp协议和udp协议的区别 五.udp协议 UDP特性 六.telnet协议 一.TCP协议 1.介绍 TCP&#xff08;Transm…

深入学习 C++编程,数据结构与算法关系

数据结构是计算机科学中非常重要的概念之一。它是一种组织和存储数据的方式&#xff0c;能够有效地操作和管理数据&#xff0c;以便提高算法的效率。 以下是一些为什么要有数据结构的原因&#xff1a; (1) 数据组织&#xff1a;数据结构可以帮助我们组织和管理大量的数据。通过…