el-table 跨页多选

步骤一

 在<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(); //取消全部选中

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

记录 | 使用samba将ubuntu文件夹映射到windows实现共享文件夹

一、ubuntu配置 1. 安装 samba samba 是在 Linux 和 UNIX 系统上实现 SMB 协议的一个免费软件&#xff0c;由服务器及客户端程序构成。SMB&#xff08;Server Messages Block&#xff0c;信息服务块&#xff09;是一种在局域网上共享文件和打印机的一种通信协议。 sudo apt-…

使用 Axios 进行网络请求的全面指南

使用 Axios 进行网络请求的全面指南 本文将向您介绍如何使用 Axios 进行网络请求。通过分步指南和示例代码&#xff0c;您将学习如何使用 Axios 库在前端应用程序中发送 GET、POST、PUT 和 DELETE 请求&#xff0c;并处理响应数据和错误。 准备工作 在开始之前&#xff0c;请…

鸿蒙原生应用开发——分布式数据对象

01、什么是分布式数据对象 在可信组网环境下&#xff0c;多个相互组网认证的设备将各自创建的对象加入同一个 sessionId&#xff0c;使得加入的多个数据对象之间可以同步数据&#xff0c;也就是说&#xff0c;当某一数据对象属性发生变更时&#xff0c;其他数据对象会检测到这…

使用 Kubernetes 为 CI/CD 流水线打造高效可靠的临时环境

介绍 在不断发展的科技世界中&#xff0c;快速构建高质量的软件至关重要。在真实环境中测试应用程序是及早发现和修复错误的关键。但是&#xff0c;在真实环境中设置 CI/CD 流水线进行测试可能既棘手又昂贵。 Kubernetes 是一个流行的容器编排平台&#xff0c;提供临时环境解决…

后端返回base64文件前端如何下载

1.后端返回base64格式文件 2.前端代码 <style lang"less" scoped> import "./style/common.less";.table-div-a {color: #409EFF;text-decoration: underline;cursor: pointer; } </style><template><div class"template-con…

WPF仿网易云搭建笔记(1):项目搭建

文章目录 前言项目地址动态样式组合样式批量样式覆盖Prism新建UserControler修改Material Design 笔刷收放列表可以滚动的StackPanel列表点击展开或折叠 实现效果 前言 今天接着继续细化代码&#xff0c;把整体框架写出来 项目地址 WPF仿网易云 Gitee仓库 动态样式 【WPF】C#…

使用Pytorch实现Grad-CAM并绘制热力图

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 看一下这个main cnn.py的文件 那这里我为了方便 就直接从官方的torch vision这个库当中导入一些我们常用的model 比如说我这里的例子是采用的mobile net v3 large这个模型 然后这里我将pretrain设…

融合科技,升级医疗体验——医院陪诊服务的技术创新

随着科技的迅猛发展&#xff0c;医疗服务领域也在积极借助技术手段提升患者体验。本文将探讨如何利用先进的技术代码&#xff0c;将医院陪诊服务推向新的高度。 1. 医疗预约系统的实现 # 通过Python代码实现医疗预约系统 class MedicalAppointment:def __init__(self, patie…

持续集成交付CICD:使用Maven命令下载Nexus制品

目录 一、实验 1.Maven安装 2.Nexus搭建公共组仓库及Maven全局配置文件 3.使用Maven命令下载Nexus制品 一、实验 1.Maven安装 &#xff08;1&#xff09;CentOS环境安装步骤 tar -xf apache-maven-3.8.6-bin.tar.gz #解压 mv apache-maven-3.8.6 /usr/local/maven #移动…

django与数据库交互关于当前时间的坑

背景 在线上服务中使用时间进行数据库操作时发现异常&#xff0c;而在本地环境无法成功复现此问题&#xff0c;导致难以进行故障排查。 核心问题 view.py class XxxViewSet(viewsets.ModelViewSet):queryset Xxx.objects.with_status().order_by("status", &quo…

集简云 x 零售企业丨快速集成有赞商城和微盛企微管家,实现私域运营自动化

客户介绍 某公司是一家知名的饮料厂商&#xff0c;自1998年成立以来&#xff0c;一直致力于研发和生产各种热门饮品&#xff0c;如果汁、碳酸饮料、矿泉水等。因其独特的口感和健康的品质深受消费者的喜爱。企业拥有多个知名品牌&#xff0c;享有极高的品牌知名度和市场份额。该…

Innodb-ruby深入探索Innodb存储结构

达在之前已经分享过Innodb数据存储结构知识&#xff0c;但是都是基于理论原理知识理解&#xff0c;今天利用Innodb文件解析工具ruby进行探索Innodb真实的存储结构。 索引原理过程&#xff1a;【Mysql】 InnoDB引擎深入 - 数据页 | 聚集索引_innodb的聚集索引的数据插入_Surviv…

P4 Qt如何添加qss样式表文件和添加图片资源

目录 前言 01 添加图片资源文件 02 添加qss文件 前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Qt基础_ChenPi的博客-CSDN博客》✨✨✨ &#x1f33a;本篇简介 &#xff1a;这一章…

华为OD机试 - 生成哈夫曼树(Java JS Python C)

题目描述 给定长度为 n 的无序的数字数组,每个数字代表二叉树的叶子节点的权值,数字数组的值均大于等于1。 请完成一个函数,根据输入的数字数组,生成哈夫曼树,并将哈夫曼树按照中序遍历输出。 为了保证输出的二叉树中序遍历结果统一,增加以下限制: 二叉树节点中,左节…

【后端学前端学习记录】第一天 css动画 内凹导航栏

1、学习信息 css动画 内凹导航栏_哔哩哔哩_bilibili 随便找的的视频&#xff0c;主要原因是在公司不方便有声音 2、源码 最终源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title…

案例064:基于微信小程序的考研论坛设计

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

【git push ERROR: commit id: missing Change-Id in message footer】

使用 gerrit 后&#xff0c;提交代码会出现如下截图问题&#xff1a; 临时解决&#xff1a; step1: 把上面红色的那条gitidir复制下来执行下&#xff1a; step2:执行下面的命令会添加change_id git commit --amendstep3: 然后推送代码到服务器上 git push origin HEAD:refs/fo…

openlayers地图使用---跟随地图比例尺动态标绘大小的一种方式3

openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式 预期&#xff1a;随着地图比例尺放大缩小&#xff0c;地图上的标绘随着变化尺寸 思路&#xff1a;通过VectorImage和动态修改Feature尺寸实现Feature跟随地图比例尺尺寸变化 优点&#xff1a;结合第1和第2种方式的…

3接上篇 我的自定义GPTs的改进优化 与物理世界连接成功 GPTs的创建与使用定义和执行特定任务的功能模块 通过API与外部系统或服务的交互

https://blog.csdn.net/chenhao0568/article/details/134875067?spm1001.2014.3001.5502 从服务器日志里看到请求多了一个“location” 23.102.140.123 - - [08/Dec/2023:14:02:20 0800] "GET /getWeather.php?location&locationNewYork HTTP/1.1" 200 337 &…

机器学习与低代码开发:创新驱动的双剑合璧

引言 随着科技的日新月异&#xff0c;机器学习和低代码开发已经成为引领技术行业变革的两大重要趋势。机器学习通过模拟人类的学习方式&#xff0c;让计算机具备了自我学习和预测的能力&#xff0c;打破了传统计算机程序的局限性。而低代码开发则以简化软件开发过程为目标&…