element表格多选实现
表格实现多选
实现表格多选很简单,只需要在表格里加上一列即可,加完之后就会在表格里出现一列白色的四方块按钮,可以多选,也可以单选
<el-table-columntype="selection"width="55"align="center">

那么,如何获取选中的数据呢,官方文档提供了三种钩子函数,但是一个就可以满足需求了,在表格设置中加上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字符串如下:

实现不同页一起选中
之前所做的工作,仅仅只能在当前页进行选中,获取选中的数据,而不能实现换页一起选中,点击下一页之后,之前选中的数据就丢失了。而为了解决这个问题,那么就可以在表格的设置中添加: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条,第二页甚至第三页数据其实是没有获取的,该策略被称之为是懒加载,可以大大缩短求情时间,提升用户体验。只有点击第二页的时候,才会获取第二页的数据进行展示。所以呢,要想一键选中所有页的数据,还需要做一些特殊的骚操作才行。
(持续更新中…)
相关文章:
element表格多选实现
表格实现多选 实现表格多选很简单,只需要在表格里加上一列即可,加完之后就会在表格里出现一列白色的四方块按钮,可以多选,也可以单选 <el-table-columntype"selection"width"55"align"center"&…...
宠物智能自动喂食器方案设计
据相关数据表明,2019年全国城镇宠物犬猫数量达到9915万只,增幅达到8.4%,消费市场规模达2024亿元,比2018年增长18.5%,整体呈现持续大幅增长的态势。而养宠人群的主力,为25岁至38岁年轻人,都市白领…...
学习笔记230818---对于promise失败状态处理的重要性
问题描述: 在项目中经常会出现如上的问题,这是因为,用promise封装的接口或第三方组件方法,如果只对成功的状态做处理,就会造成页面出错,报error。 解决方法 then()的末尾加上.catch(()>{})对失败的状态…...
【Redis】什么是缓存击穿,如何预防缓存击穿?
【Redis】什么是缓存击穿,如何预防缓存击穿? 缓存击穿是指一个 Key 非常热点,大并发集中对这一个点进行访问,当这个Key 在失效的瞬间,持续的大并发就会穿破缓存,直接请求数据库。缓存击穿和缓存雪崩的区别…...
Android 13.0 强制app横屏显示
1.概述 在13.0产品定制化开发中,对于处理屏幕旋转方向,首先有kernel底层处理,从底层驱动gsensor 中获取数据,从而判断屏幕方向的,然后事件上报后 最后由WMS就是WindowManagerService 来处理旋转的相关事件 2.强制app横屏显示的核心类 /framework/base/services/java/com…...
平方数之和(力扣)双指针 JAVA
给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a^2 b^2 c 。 示例 1: 输入:c 5 输出:true 解释:1 * 1 2 * 2 5 示例 2: 输入:c 3 输出&am…...
深入浅出Pytorch函数——torch.nn.init.sparse_
分类目录:《深入浅出Pytorch函数》总目录 相关文章: 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...
OpenCV实现BGR2BayerGB/BG格式的转换
1、说明 OpenCV没有提供从BGR生成Bayer格式的接口,需要自己写 OpenCV定义为4种格式,分别为: BGGR排列 -> RG格式 RGGB排列 -> BG格式 GRBG排列 -> GB格式 GBRG排列 -> GR格式 2、转换 void CUtils::BGR2BayerGB(const cv::Mat &matSrc, cv::Mat &matDst)…...
Gateway网关路由以及predicates用法(项目中使用场景)
1.Gatewaynacos整合微服务 服务注册在nacos上,通过Gateway路由网关配置统一路由访问 这里主要通过yml方式说明: route: config: #type:database nacos yml data-type: yml group: DEFAULT_GROUP data-id: jeecg-gateway-router 配置路由:…...
深入浅出Pytorch函数——torch.nn.init.constant_
分类目录:《深入浅出Pytorch函数》总目录 相关文章: 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...
centos mysql8解决Access denied for user ‘root‘@‘localhost‘ (using password: YES)
环境 系统:CentOS Stream release 9 mysql版本:mysql Ver 8.0.34 for Linux on x86_64 问题 mysql登录提示 Access denied for user rootlocalhost (using password: YES)解决方法 编辑 /etc/my.cnf ,在[mysqld] 部分最后添加一行 skip-…...
Docker实战:Docker常用命令
一、镜像相关 1.1、查看镜像 docker images1.2、拉取镜像 docker pull nginx1.3、保存镜像 docker save -o nginx.tar nginx:latest1.4、移除镜像 docker rmi -f nginx:latest1.5、导入镜像 docker load -i nginx.tar二、容器相关 2.1、启动容器 docker run --name red…...
基于51单片机直流电机转速数码管显示控制系统
一、系统方案 本文主要研究了利用MCS-51系列单片机控制PWM信号从而实现对直流电机转速进行控制的方法。本文中采用了三极管组成了PWM信号的驱动系统,并且对PWM信号的原理、产生方法以及如何通过软件编程对PWM信号占空比进行调节,从而控制其输入信号波形等…...
小程序商品如何指定打印机
有些商家,可能有多个仓库。不同的仓库,存放不同的商品。当客户下单时,小程序如何自动按照仓库拆分订单,如何让打印机自动打印对应仓库的订单呢?下面就来介绍一下吧。 1. 设置订单分发模式。进入管理员后台,…...
LLaMA-7B微调记录
Alpaca(https://github.com/tatsu-lab/stanford_alpaca)在70亿参数的LLaMA-7B上进行微调,通过52k指令数据(https://github.com/tatsu-lab/stanford_alpaca/blob/main/alpaca_data.json),在8个80GB A100上训…...
域名子目录发布问题(nginx、vue-element-admin、uni-app)
域名子目录发布问题(nginx、vue-element-admin、uni-app) 说明Vue-Element-Admin 代码打包nginx配置:uni-app打包 说明 使用一个域名下子目录进行打包: 比如: http://www.xxx.com/merchant 商户端代码 http://www.xx…...
【环境配置】Windows 10 安装 PyTorch 开发环境,以及验证 YOLOv8
Windows 10 安装 PyTorch 开发环境,以及验证 YOLOv8 最近搞了一台Windows机器,准备在上面安装深度学习的开发环境,并搭建部署YOLOv8做训练和测试使用; 环境: OS: Windows 10 显卡: RTX 3090 安…...
数学建模之“层次分析法”原理和代码详解
一、层次分析法简介 层次分析法(Analytic Hierarchy Process,AHP)是一种用于多准则决策分析和评估问题的定量方法,常用于数学建模中。它是由数学家托马斯赛蒂(Thomas Saaty)开发的。 层次分析法将复杂的决…...
使用IText导出复杂pdf
1、问题描述 需要将发票导出成pdf,要求每页都必须包含发票信息和表头行。 2、解决方法 使用IText工具实现PDF导出 IText8文档:Examples (itextpdf.com) 3、我的代码 引入Itext依赖,我这里用的是8.0.1版本 <dependency><groupId>…...
多线程并发服务器(TCP)
服务器 客户端 结果...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
