element表格多选实现

表格实现多选

实现表格多选很简单,只需要在表格里加上一列即可,加完之后就会在表格里出现一列白色的四方块按钮,可以多选,也可以单选

      <el-table-columntype="selection"width="55"align="center">

image-20230819171259179

那么,如何获取选中的数据呢,官方文档提供了三种钩子函数,但是一个就可以满足需求了,在表格设置中加上selection-change 这个事件,其功能为:只要选中的数据发生改变,那么就会触发这个函数

    <el-table:data="tableData"style="width: 100%; margin-top: 10px":border="true"v-loading="loading"@selection-change="handleSelectionChange">

函数具体内容如下:

    handleSelectionChange(val) {// val拿到的是选中行的全部数据,而this.multipleSelection是把val以对象装在数组中this.multipleSelection = val;console.log(this.multipleSelection);// 每次都清空存储的数据,并装入新数据this.SelectionList = [];for (const val of this.multipleSelection) {for (const key in val) {if (key === "id") {this.SelectionList.push(val[key]);}}}// 在遍历之后转换为字符串,因为这里后端要的值只有行id,因此就全部转为字符串后发给后端this.ROWids = this.SelectionList.toString();console.log("this.ROWids", this.ROWids);},//具体要什么值,需要根据实际开发情况而定,而该函数直接获取到所有选中行的所有数据,就很nics,想要什么就取什么就可以了。

到这里为止,就已经完成了多选以及获取选中的数据

val获取的值,multipleSelection存储的值以及转化之后的ROWids字符串如下:

image-20230819172112425

实现不同页一起选中

之前所做的工作,仅仅只能在当前页进行选中,获取选中的数据,而不能实现换页一起选中,点击下一页之后,之前选中的数据就丢失了。而为了解决这个问题,那么就可以在表格的设置中添加:row-key="id" 属性,以及在多选列中添加 :reserve-selection="true" 即可,其会实现存储功能,让不同页之间也可以实现一起选中

    <el-table:data="tableData"style="width: 100%; margin-top: 10px":border="true"row-key="id"v-loading="loading"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"align="center":reserve-selection="true">

控制表格选中数据清空

截止上一步为止,我们并没有实现通过代码清空选中行的功能,而只能在页面中通过手动的方式去取消之前选中的行;设想,我已经完成了对所选行的操作,例如查询,导出等操作,那么操作完成之后一定会再次请求接口刷新页面,而选中的标志却并没有消失,这就很影响用户体验;

而可以这样进行解决,我们只需要在表格的设置中添加 ref="multipleTable" 然后在想要清空选中数据的回调处(如查询数据结束之后的回调)在通过 this.$refs.multipleTable.clearSelection(); 即可完成清空选中数据的操作,nics!!!

    <el-table:data="tableData"ref="multipleTable"style="width: 100%; margin-top: 10px":border="true"row-key="id"v-loading="loading"@selection-change="handleSelectionChange">

javascript代码

    ReturnFace() {if (this.ROWids == []) {this.$message({message: "未选中数据,不予检测!!!",type: "warning",});} else {let data = {ids: this.ROWids,};this.$confirm("是否进行人脸下发检测?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(function () {return ReturnPeopFace(data);}).then(() => {this.getList();this.msgSuccess("人脸下发检测成功!");this.$refs.multipleTable.clearSelection();});}},

表格实现一键选中所有数据

截止目前,所做的工作实际上是:可以实现同页、不同页多选;一键选中当前页的所有行;以及在自己想要的回调处清空自前选中的行;

但是,却并没有实现一键选中所有的数据,这是为什么呢?是因为当数据量比较多的时候,数据会进行分页展示,例如有30条数据,每页在初始化时展示10条,第二页甚至第三页数据其实是没有获取的,该策略被称之为是懒加载,可以大大缩短求情时间,提升用户体验。只有点击第二页的时候,才会获取第二页的数据进行展示。所以呢,要想一键选中所有页的数据,还需要做一些特殊的骚操作才行。

(持续更新中…)

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

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

相关文章

17.2 【Linux】通过 systemctl 管理服务

systemd这个启动服务的机制&#xff0c;是通过一支名为systemctl的指令来处理的。跟以前 systemV 需要 service / chkconfig / setup / init 等指令来协助不同&#xff0c; systemd 就是仅有systemctl 这个指令来处理而已。 17.2.1 通过 systemctl 管理单一服务 &#xff08;s…

Wireshark数据抓包分析之HTTP协议

一、实验目的&#xff1a; 主要时熟悉wireshark的使用 二、预备知识&#xff1a; HTTP协议的相关知识 what fk&#xff0c;原来只要在右页点击切换&#xff0c;就可以开启2台不同的机器欸&#xff01;nice 三、实验过程&#xff1a; 1.在机器1中通过管理员身份运行hfs之后&a…

Struts vs. Struts 2:Java Web 开发框架的升级之路与竞争力分析

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

centos如何查找某一命令对应的安装包

需求背景 有时候在容器里搭建了一个开发环境&#xff0c;需要有些命令能在容器里也能用&#xff0c;但是有时候只知道命令&#xff0c;但是不知道这个命令对应的是哪个安装包提供&#xff0c;比如最简单的命令 ip命令&#xff0c;"ip a"可以查看主机的所有ip信息&am…

多客户企业选择拥有哪些功能的CRM系统?

管理海量客户信息对于每一家企业都是巨大的挑战。粗放式的管理客户资料是对资源的一种浪费&#xff0c;让很多有意向的高价值客户流失。客户比较多&#xff0c;有什么CRM系统推荐吗&#xff1f;帮助企业轻松地跟进客户&#xff0c;提高销售效率&#xff1f; 1.易于使用 首先是…

【ES6】—【必备知识】—箭头函数

一、定义函数 1. ES5 1. 普通函数预定义&#xff0c;再调用 console.log(sum(1, 2)) function sum (x, y) {return x y } console.log(sum(1, 2))2. 函数表达式 按代码顺序定义 console.log(sum(1, 2)) // sum is not a function // sum不是一个函数 var sum function (x…

opencv-yolov8-目标检测

import cv2 from ultralytics import YOLO# 模型加载权重model YOLO(yolov8n.pt)# 视频路径cap cv2.VideoCapture(0)# 对视频中检测到目标画框标出来 while cap.isOpened():# Read a frame from the videosuccess, frame cap.read()if success:# Run YOLOv8 inference on th…

Temu闯关日韩受挫?跨境电商卖家如何打磨好营销链路

海外版拼多多 Temu 先后在日本和韩国上线&#xff0c;然而效果不似预期&#xff0c;日韩市场对这套“低价补贴”策略并不买账。作为一个尚未被日韩消费者熟悉的网站&#xff0c;其价格之便宜无法让消费者信任。除此之外更大的问题是&#xff0c;在日本卷不过线下零售与百元店&a…

怎么去选消息队列? Kafka vs. RabbitMQ

在上周&#xff0c;我们讨论了使用消息队列的好处。然后我们回顾了消息队列产品的发展历史。如今&#xff0c;在项目中需要使用消息队列时&#xff0c;Apache Kafka似乎是首选产品。然而&#xff0c;考虑到特定需求时&#xff0c;它并不总是最佳选择。 基于数据库的队列 让我们…

springboot引入druid解析sql

一、前言 在开发中&#xff0c;有时我们可能会需要获取SQL中的表名&#xff0c;那么因为不同的数据源类型SQL会存在部分差异&#xff0c;那么我们就可以使用alibaba 的druid包实现不同的数据源类型的sql解析。 二、引入相关maven依赖 <dependency><groupId>com.a…

【核磁共振成像】傅里叶重建

目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR&#xff0c;长TE&#xff0c;是T2加权像&#xff1b; 短TR&#xff0c;短TE&#xff0c;是T1加权像&#xff1b; 长TR&#xff0c;短TE&#…

Debootstrap 教程

文章目录 Debootstrap 教程安装 debootstrap使用 debootstrap运行 debootstrap进入新的系统结束语 Debootstrap 教程 debootstrap 是一个用于在 Debian-based 系统上创建一个基本的 Debian 系统的工具。它可以用于创建 chroot 环境、容器或者为新的系统安装做准备。 安装 deb…

oracle警告日志\跟踪日志磁盘空间清理

oracle警告日志\跟踪日志磁盘空间清理 问题现象&#xff1a; 通过查看排查到alert和tarce占用大量磁盘空间 警告日志 /u01/app/oracle/diag/rdbms/orcl/orcl/alert 跟踪日志 /u01/app/oracle/diag/rdbms/orcl/orcl/trace 解决方案&#xff1a; 用adrci清除日志 确定目…

item_search_img-按图搜索淘宝商品(拍立淘)

一、接口参数说明&#xff1a; item_search_img-按图搜索淘宝商品&#xff08;拍立淘&#xff09;&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_search_img 名称类型必须描…

OpenAI推出GPT-3.5Turbo微调功能并更新API;Midjourney更新局部绘制功能

&#x1f989; AI新闻 &#x1f680; OpenAI推出GPT-3.5Turbo微调功能并更新API&#xff0c;将提供GPT-4微调功能 摘要&#xff1a;OpenAI宣布推出GPT-3.5Turbo微调功能&#xff0c;并更新API&#xff0c;使企业和开发者能够定制ChatGPT&#xff0c;达到或超过GPT-4的能力。通…

Ribbon 源码分析

Ribbon 源码分析 Ribbon Debug 分析 断点 LoadBalancerInterceptor LoadBalancerInterceptor 实现了 ClientHttpRequestInterceptor 接口&#xff0c;重写了其中的 intercept 方法&#xff0c;用来拦截请求&#xff1b; 获取原始的 uri 和 服务名&#xff0c;调用 LoadBalanc…

Docker Compose

一、Docker-Compose使用场景二、Docker-Compose简介三、Docker-Compose 部署四、YAML 文件格式及编写注意事项五、Docker-Compose配置常用字段六、Docker-Compose 常用命令七、Docker-Compose 文件结构八、Docker-Compose 撰写nginx8.1 准备依赖文件8.2 编写配置文件docker-com…

基于串口透传模块,单片机无线串口空中下载测试

基于串口透传模块&#xff0c;单片机无线串口空中下载测试 ✨无线串口下载&#xff0c;其本质还是串口下载方式&#xff0c;只不过省去了单片机和ISP上位机工具之间的物理有线连接&#xff0c;中间的数据通过无线串口透传模块进行数据中转&#xff0c;传递到单片机串口上。串口…

爬虫借助代理会让网速快点吗?

亲爱的程序员朋友们&#xff0c;你曾经遇到过爬虫网速慢的情况吗&#xff1f;别着急&#xff01;今天我将和你一起探讨一下使用代理是否可以加速爬虫&#xff0c;让我们一起进入这个轻松又专业的知识分享。 一、原因和机制的解析 1.IP限制 某些网站为了保护资源和防止爬虫行…

认识Redis

1. 前置操作 以下内容基于CentOS 1.1. 安装 yum -y install redis 1.2. 启动 redis-server /etc/redis.conf & 1.3. 打开 redis-cli 1.4. 停止 redis-cli shutdown 1.5. 设置远程连接 修改 /etc/redis/redis.conf 修改 bind 127.0.0.1为 bind 0.0.0.0 1.6. 使用…