【vue】element el-table怎么实现跨页勾选

【vue】element el-table怎么实现跨页勾选

需求

由后端提供分页接口,每一次翻页el-table的数据都会被刷新一次,这种情况下怎么实现跨页的勾选

代码

<el-tableref="multipleTable"v-loading="loading":data="operationList"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column>
</el-table>
handleSelectionChange(e) {if(this.loading) return for(let listItem of this.operationList){let eIndex = e.findIndex(item=>item.ic===listItem.ic)if(eIndex>=0){//该数据再当页被选中了let index = this.batchRedeployIds.findIndex(item=>item.id===listItem.id)if(index<0){//如果batchRedeployIds中没有该数据则添加上this.batchRedeployIds.push(listItem)}}else{//该数据在当页没被选中let index = this.batchRedeployIds.findIndex(item=>item.id===listItem.id)if(index>=0){//如果batchRedeployIds中有该数据则需要删除this.batchRedeployIds.splice(index,1)}}}},

翻页方法

getList() {请求方法(paramsObj).then((res) => {// console.log(res.rows);if (res.code == '200') {this.operationList = res.data.records;this.total = res.data.total;// this.loading = false;this.$nextTick(()=>{for(let listItem of this.operationList){let index = this.batchRedeployIds.findIndex(item=>item.workOrderId===listItem.workOrderId)if(index>=0){this.$nextTick(()=>{this.$refs.multipleTable.toggleRowSelection(listItem,true)})}else{// this.$refs.multipleTable.toggleRowSelection(listItem,false)}}this.loading=false})}}).catch(() => {this.loading = false;});},

分析

1.定义了一个batchRedeployIds变量,储存所有被选中的行
2.每次勾选变化时,往batchRedeployIds里添加或删除元素
3.每次分页请求后,回填batchRedeployIds里的选中元素

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

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

相关文章

使用阿里巴巴同步工具DataX实现Mysql与ElasticSearch数据同步

一、Linux环境要求 二、准备工作 2.1 Linux安装jdk 2.2 linux安装python 2.3 下载DataX&#xff1a; 三、DataX压缩包导入&#xff0c;解压缩 四、编写同步Job 五、执行Job 六、定时更新 6.1 创建定时任务 6.2 提交定时任务 6.3 查看定时任务 七、增量更新思路 一、Linux环境要…

C#教程(一):面向对象

1、介绍 C#是一种多范式编程语言&#xff0c;但其中一个主要的编程范式是面向对象编程&#xff08;OOP&#xff09;。面向对象编程有一些特点&#xff0c;而C#提供了丰富的功能来支持这些特点。 2、面向对象特点 封装&#xff08;Encapsulation&#xff09;&#xff1a; 封装…

亚马逊云科技产品测评榜单新鲜出炉,你上榜了吗?

随着云计算时代的到来&#xff0c;高新科技产品成为我们生活中不可或缺的东西&#xff0c;亚马逊云科技产品全面发力以创新技术助力每一个用户。感受和测评最热门的亚马逊云科技开发者工具与服务为技术发展提供了更多的可能性。 亚马逊云科技产品测评中&#xff0c;大家借助亚马…

微信小程序--判断目标元素是否在可视区域内(可视区域播放视频)

步骤&#xff1a; 1、创建对象实例 2、获取/指定界面上的节点信息 3、判断节点是否在当前屏幕可视区域 微信API提供了两种获取创建对象实例和获取节点的方法&#xff0c;按照以上步骤&#xff0c;我们一一来看&#xff1a; 1、wx.createSelectorQuery() wx.createSelectorQ…

Nginx访问FTP服务器文件的时效性/安全校验

背景 FTP文件服务器在我们日常开发中经常使用&#xff0c;在项目中我们经常把FTP文件下载到内存中&#xff0c;然后转为base64给前端进行展示。如果excel中也需要导出图片&#xff0c;数据量大的情况下会直接返回一个后端的开放接口地址&#xff0c;然后在项目中对接口的参数进…

使用shell脚本将一台虚拟机上面数据分发到其他虚拟机上面xsync

目录 1&#xff0c;功能2&#xff0c;注意点3&#xff0c;shell脚本介绍4&#xff0c;bash内容 1&#xff0c;功能 使用shell脚本将一台虚拟机上面数据分发到其他虚拟机上面。 2&#xff0c;注意点 需要修改的地方&#xff1a;hadoop250 hadoop251 hadoop252 hadoop253 hado…

魔搭社区上线Mistral AI 首个开源 MoE 模型 Mixtral8x7B

Mistral AI 近日发布了首个开源 MoE 模型 Mixtral8x7B&#xff0c;并宣布在魔搭社区上线。 Mixtral-8x7B 是一款混合专家模型&#xff08;Mixtrue of Experts&#xff09;&#xff0c;由8个拥有70亿参数的专家网络组成&#xff0c;在能力上&#xff0c;Mixtral-8x7B 支持32k t…

Java的引用类型有几种?区别是什么?

Java中的引用类型主要分为四种&#xff1a;强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;和虚引用&#xff08;Phantom Reference&#xff09;。这些引用类型在Java中主要用于…

MyBatis-Flex 常见问题

文章目录 官网常见问题MyBatis-Flex 没有启动或者启动出错怎么办&#xff1f;示例中的 AccountMapper 和 "ACCOUNT" 在哪里&#xff0c;报错了。阿里镜像找不到依赖&#xff1f;SpringBoot 3.2 项目&#xff0c;启动报错 Invalid value type for attribute factoryBe…

【Qt5】QMouseEvent的globalPos

2023年12月14日&#xff0c;周四下午 QMouseEvent的globalPos()函数是用于获取鼠标事件发生时的全局坐标。它返回一个QPoint对象&#xff0c;表示鼠标事件的全局位置。 全局坐标是相对于整个屏幕的坐标系&#xff0c;而不是相对于应用程序窗口或控件的坐标系。它可以用来确定鼠…

美颜技术讲解:视频美颜SDK的开发与集成

如今&#xff0c;美颜技术的应用愈发成为吸引用户的一项重要功能。本文将深入探讨视频美颜SDK的开发与集成&#xff0c;揭示其背后的技术原理和实现步骤。 一、美颜技术的背后 美颜技术并非仅仅是简单的滤镜效果&#xff0c;而是一项涉及复杂图像处理和算法的技术。在视频美颜…

wordpress 修改社交图标

要去掉标记的图标&#xff0c;死活找不到在那里配置。后来找到了&#xff0c;下图&#xff08;wordpress 小白&#xff0c;特此记录&#xff09;

解析“七星创客”模式在零售行业的核心要素与成功关键

在互联网时代&#xff0c;商业模式不断创新&#xff0c;其中“七星创客”模式备受关注。零售行业面临着竞争激烈的市场环境&#xff0c;如何衔接“七星创客”模式以提高销售业绩和用户忠诚度成为重要议题。本文将探讨零售行业如何成功衔接“七星创客”模式&#xff0c;并提出具…

安装python第三方库后,在pycharm中不能正常导入

python小白学习opencv&#xff0c;使用pip安装完opencv库后import cv2报错&#xff0c;按照如下设置解决&#xff1a; 需要正确设置python解释器路径

Python内置类属性`__cmp__`属性的使用教程

概要 在Python中&#xff0c;__cmp__属性是一个特殊的方法&#xff0c;用于自定义类的实例之间的比较方式。深入了解和熟练运用这一特性&#xff0c;可以使自定义类更加灵活和强大。本教程将详细介绍__cmp__的基本概念、高级用法以及一些注意事项&#xff0c;通过丰富的示例代…

跨境电商群发消息工具定制贵吗?

随着全球电子商务的快速发展&#xff0c;跨境电商已经成为了一种新兴的商业形式。 为了能够更好地与海外客户沟通&#xff0c;许多卖家开始寻找跨境电商群发消息工具&#xff0c;那么&#xff0c;这些工具的定制费用是否昂贵呢? 首先&#xff0c;我们需要明确一点&#xff1…

线程上下文设计模式

线程上下文机制是参考应用或者系统上下文的机制&#xff0c;使每个线程拥有自己的上下文&#xff0c;不与其他线程共享。线程上下文机制有不同于其他上下文机制的地方&#xff0c;即线程的生命周期结束后&#xff0c;线程上下文也要回收掉&#xff0c;不然容易出现内存泄露。 T…

在线免费压缩pdf文件

在线免费压缩pdf文件&#xff0c;不用登陆哦&#xff0c; https://www.ilovepdf.com/ https://online2pdf.com/#

FFmpeg之HWContextType

HWContextType算是ffmpeg中为硬解码第三方接口的一个辅助类&#xff0c;它自己有两个辅助子类 AVHWDeviceContext和AVHWFramesContext。 AVHWDeviceContext主要表示硬件上下文 AVHWFramesContext主要表示硬件Frame的一些参数&#xff0c;比如你解码后的YUV数据还在硬件上&#…

el-form表单校验输入框值为0时 提示校验不通过

el-form表单校验输入框值为0时提示校验不通过 配置validator自定义校验方法 这里举例在结构代码里加入校验规则 <el-form-item:prop"num":rules"[{required: true,message: 请输入数量,trigger: change,},{validator,trigger: blur}]" ><el-inpu…