vue3:使用:批量删除功能

场景:vue中使用el-table,常需要记住上一页所勾选的数据,批量删除操作,或者弹窗分页勾选,进行第一页勾选,在调后端接口选择第二页勾选其他数据。

1、element-ui 的table表格可以轻松实现多选的功能,只要在表格列中增加type="selection"的一列即可。

2、保存勾选值,分页记录,添加 :reserve-selection=“true”

大部分情况下,表格的数据是有分页的,分页一般是要请求后台接口,这样上一页也就是上一次请求的数据的选中状态就没有了。element-ui提供了reserve-selection,可以保存数据更新前选中的值,仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)。

<el-table v-loading="loading" ref="multipleTableRef" :data="tableList" @selection-change="handleSelectionChange" // 多选事件:row-key="getRowKeys"
><el-table-column type="selection" :reserve-selection="true" width="55" fixed='left' />
</el-table><script setup name="serviceLeader">
const multipleTableRef = ref();
const multipleSelection = ref([]) // 多选的数据
// 多选
const handleSelectionChange = (val) => {console.log('多选', val)multipleSelection.value = val
}
// 
const getRowKeys = (row) => {return row.id
}
</script>

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

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

相关文章

一文速学-让神经网络不再神秘,一天速学神经网络基础-前向传播(三)

前言 思索了很久到底要不要出深度学习内容&#xff0c;毕竟在数学建模专栏里边的机器学习内容还有一大半算法没有更新&#xff0c;很多坑都没有填满&#xff0c;而且现在深度学习的文章和学习课程都十分的多&#xff0c;我考虑了很久决定还是得出神经网络系列文章&#xff0c;…

构建个人博客_Obsidian_github.io_hexo

1 初衷 很早就开始分享文档&#xff0c;以技术类的为主&#xff0c;一开始是 MSN&#xff0c;博客&#xff0c;随着平台的更替&#xff0c;后来又用了 CSDN&#xff0c;知乎&#xff0c;简书…… 再后来是 Obsidian&#xff0c;飞书&#xff0c;Notion&#xff0c;常常有以下困…

vue页面转pdf后分页时文字被横向割裂

效果 预期效果 //避免分页被截断async outPutPdfFn (id, title) {const _t this;const A4_WIDTH 592.28;const A4_HEIGHT 841.89;// dom的id。let target document.getElementById(pdf);let pageHeight target.scrollWidth / A4_WIDTH * A4_HEIGHT;// 获取分割dom&#xf…

Rancher部署k8s集群

Rancher部署 Rancher是一个开源的企业级容器管理平台。通过Rancher&#xff0c;企业再也不必自己使用一系列的开源软件去从头搭建容器服务平台。Rancher提供了在生产环境中使用的管理Docker和Kubernetes的全栈化容器部署与管理平台。 首先所有节点部署docker 安装docker 安…

边缘计算相关概念--学习笔记

一.边缘计算概念 边缘计算将数据的处理&#xff0c;应用程序的运行甚至一些功能服务的实现&#xff0c;由网络中心下放到网络边缘的节点上&#xff0c;在网络边缘侧的智能网关上就近采集并且处理数据&#xff0c;不需要将大量未处理的数据上传到远程的大数据平台。边缘计算理论…

Windows版本Docker安装详细步骤

文章目录 下载地址安装异常处理docker desktop requires a newer wsl 下载地址 https://desktop.docker.com/win/stable/Docker%20Desktop%20Installer.exe 安装 双击下载的文件Docker Desktop Installer.exe进行安装 点击OK 开始安装 安装完成点击Close and restart&…

如何在vscode导入下载的插件安装包

点击vscode插件 --> 点击3个点 --> 选择从VSIX安装 点击更新报 Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you’re on macOS Sierra or later, you’ll need to m…

【Linux】【驱动】注册字符设备号

【Linux】【驱动】注册字符设备号 1. 绪论1 、静态分配设备号2、动态分配设备号3、注销设备号 2 实现的代码3 加载驱动程序 1. 绪论 在之前杂项设备的时候&#xff0c;设备号是固定的&#xff0c;字符设备就需要自己去申请设备号了&#xff0c; 申请设备号有两个方式&#xff…

linux 设置与命令基础(二)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、系统基本操作 二、命令类型 三、命令语法 四、命令补齐 五、命令帮助 六、系统基本操作命令 总结 前言 这是本人学习Linux的第二天&#xff0c;今天主…

dockerfile 例子(二)

Dockerfile由一行一行的命令语句组成&#xff0c;#开头的为注释行。Dockerfile文件内容分为四个部分&#xff1a;基础镜像信息、维护者信息、镜像操作指令以及容器启动执行指令。 接下来给大家列出Dockerfile中主要命令的说明。 FROM&#xff0c;指定所创建镜像的基础镜像。 …

path模块

path.resolve() 作用&#xff1a;path.resolve() 该方法将一些的 路径/路径段 解析为 绝对路径。 path.resolve总是返回一个以相对于当前的工作目录&#xff08;working directory&#xff09;的绝对路径。给定的路径序列从右到左处理&#xff0c;每个后续的 path 会被追加到前…

关于单例模式

单例模式的目的&#xff1a; 单例模式的目的和其他的设计模式的目的都是一样的&#xff0c;都是为了降低对象之间的耦合性&#xff0c;增加代码的可复用性&#xff0c;可维护性和可扩展性。 单例模式&#xff1a; 单例模式是一种常用的设计模式&#xff0c;用简单的言语说&am…

RabbitMQ的镜像队列

镜像队列 如果 RabbitMQ 集群中只有一个 Broker 节点&#xff0c;那么该节点的失效将导致整体服务的临时性不可用&#xff0c;并且也可能会导致消息的丢失。可以将所有消息都设置为持久化&#xff0c;并且对应队列的durable 属性也设置为 true &#xff0c;但是这样仍然无法…

文件上传漏洞之条件竞争

这里拿upload-labs的第18关做演示 首先先看代码 $is_upload false; $msg null;if(isset($_POST[submit])){$ext_arr array(jpg,png,gif);$file_name $_FILES[upload_file][name];$temp_file $_FILES[upload_file][tmp_name];$file_ext substr($file_name,strrpos($file_…

element-ui 自定义loading加载样式

element-ui 中的 loading 加载功能&#xff0c;默认是全屏加载效果&#xff0c; 设置局部&#xff0c;需要自定义样式&#xff0c;自定义的方法如下&#xff1a; import { Loading } from element-uiVue.prototype.$baseLoading (text) > {let loadingloading Loading.s…

[Android AIDL] --- AIDL工程搭建

0 AIDL概念 AIDL&#xff08;Android Interface Definition Language&#xff09;是一种 IDL 语言&#xff0c;用于生成可以在 Android 设备上两个进程之间进行进程间通信&#xff08;IPC&#xff09;的代码。 通过 AIDL&#xff0c;可以在一个进程中获取另一个进程的数据和调…

Debian 10 更换国内源 (中科大、网易源、阿里云)

1. 修改文件 /etc/apt/sources.list 为下面内容 根据自己需求决定使用哪个源 # Debian 10 buster# 中科大源deb http://mirrors.ustc.edu.cn/debian buster main contrib non-free deb http://mirrors.ustc.edu.cn/debian buster-updates main contrib non-free deb http://m…

HarmonyOS/OpenHarmony(Stage模型)卡片开发应用上下文Context使用场景二

3.创建其他应用或其他Module的Context 基类Context提供创建其他应用或其他Module的Context的方法为createModuleContext(moduleName:string)&#xff0c;创建其他应用或者其他Module的Context&#xff0c;从而通过该Context获取相应的资源信息&#xff08;例如获取其他Module的…

解决pandas读取excel单元格出错_x0000_

解决方法 如果已经读出来了这个问题&#xff0c;那么就只能使用replace替换了&#xff1a; import pandas as pddef change_excel_char(value):"""剔除读取excel中的 _x0000_ 字符"""if type(value) str:return value.replace("_x0000_&…

测试数据库性能的工具知多少

有许多测试数据库性能的工具&#xff0c;以下是一些常用的工具&#xff1a; sysbench: 这是一个跨平台的基准测试工具&#xff0c;可以测试多种系统资源&#xff0c;包括CPU&#xff0c;内存&#xff0c;IO&#xff0c;和并发性。对于数据库测试&#xff0c;sysbench可以用来测…