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.rhkb.cn/news/104154.html

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

相关文章

iOS App逆向之:iOS应用砸壳技术

在iOS逆向&#xff0c;有一项关键的技术叫做“iOS砸壳”&#xff08;iOS App Decryption&#xff09;。自iOS 5版本以来&#xff0c;苹果引入了应用程序加密机制&#xff0c;使得大部分应用都需要进行砸壳操作才能进行逆向分析。因此作为开发者、逆向工程师和安全研究人员都需要…

Python Opencv实践 - 图像直方图自适应均衡化

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/cat.jpg", cv.IMREAD_GRAYSCALE) print(img.shape)#整幅图像做普通的直方图均衡化 img_hist_equalized cv.equalizeHist(img)#图像直方图自适应均衡化 #1. 创…

【动手学深度学习】--21.锚框

锚框 学习视频&#xff1a;锚框【动手学深度学习v2】 官方笔记&#xff1a;锚框 1.锚框 目标检测算法通常会在输入图像中采样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界从而更准确地预测目标的真实边界框&#xff08;gro…

hive问题总结

往往用了很久的函数却只知道其单一的应用场景&#xff0c;本文将不断完善所遇到的好用的hive内置函数。 1.聚合函数或者求最大最小值函数搭配开窗函数使用可以实现滑动窗口 例&#xff1a; SELECT event,time,session_id,COLLECT_LIST(event) OVER (PARTITION BY session_id …

ChatGPT + Flutter快速开发多端聊天机器人App

下载地址&#xff1a;ChatGPT Flutter快速开发多端聊天机器人App 下载地址&#xff1a;ChatGPT Flutter快速开发多端聊天机器人App

PL 侧驱动和fpga 重加载的方法

可以解决很多的问题 时钟稳定后加载特定fpga ip &#xff08;要不内核崩的一塌糊涂&#xff09;fpga 稳定复位软件决定fpga ip 加载的时序 dluash load /usr/local/scripts/si5512_setup.lua usleep 30 mkdir -p /lib/firmware cp -rf /usr/local/firmare/{*.bit.bin,*.dtbo} …

Flutter实现动画列表AnimateListView

由于业务需要&#xff0c;在打开列表时&#xff0c;列表项需要一个从右边飞入的动画效果&#xff0c;故封装一个专门可以执行动画的列表组件&#xff0c;可以自定义自己的动画&#xff0c;内置有水平滑动&#xff0c;缩放等简单动画。花里胡哨的动画效果由你自己来定制吧。 功…

206.Flink(一):flink概述,flink集群搭建,flink中执行任务,单节点、yarn运行模式,三种部署模式的具体实现

一、Flink概述 1.基本描述 Flink官网地址:Apache Flink — Stateful Computations over Data Streams | Apache Flink Flink是一个框架和分布式处理引擎,用于对无界和有界数据流进行有状态计算。 2.有界流和无界流 无界流(流): 有定义流的开始,没有定义结束。会无休止…

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...

全文下载链接&#xff1a;http://tecdat.cn/?p23544 在本文中&#xff0c;长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络&#xff0c;能够学习长期依赖关系&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 本文使用降雨量数据&#xf…

Docker file解析

文章目录 简介构建的三步骤Docker执行Dockerfile的大致流程DockerFile常用保留字指令创建第一个Dockerfile镜像的缓存特性 Docker file 解析 简介 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本&#xff0c;记录了镜像构…

ffmpeg,nginx,vlc把rtsp流转hls

ffmpeg:rtsp>hls流; nginx 托管hls流服务; vlc测试hls流服务; 参考了很多相关文档和资料,由于比较乱就不在一一引用介绍了&#xff0c;下面的是实操OK的例子&#xff1b; 1&#xff09;ffmpeg (ffmpeg-4.4.1-full_build)&#xff0c;要用full版本&#xff0c;否则会缺某些…

华为数通方向HCIP-DataCom H12-821题库(单选题:61-80)

第61题 关于 BGP 的Keepalive报文消息的描述,错误的是 A、Keepalive周期性的在两个BGP邻居之间发送 B、Keepalive报文主要用于对等路由器间的运行状态和链路的可用性确认 C、Keepalive 报文只包含一个BGP数据报头 D、缺省情况下,Keepalive 的时间间隔是180s 答案&#xff…

videojs 实现自定义组件(视频画质/清晰度切换) React

前言 最近使用videojs作为视频处理第三方库&#xff0c;用来对接m3u8视频类型。这里总结一下自定义组件遇到的问题及实现&#xff0c;目前看了许多文章也不全&#xff0c;官方文档写的也不是很详细&#xff0c;自己摸索了一段时间陆陆续续完成了&#xff0c;这是实现后的效果.…

MyBatis分页与特殊字符处理

文章目录 一、分页1.1 分页插件PageHelper1.2 使用1.2.1 导入pom依赖1.2.2 Mybatis.cfg.xml配置拦截器1.2.3. 配置 Mapper.xml1.2.4 测试 二、特殊字符处理2.1 使用CDATA区段2.2 使用实体引用 一、分页 1.1 分页插件PageHelper PageHelper 是 Mybatis 的一个插件。官网 Page…

ios小组件报错:Please adopt containerBackground API

iOS 17 小组件报错:Please adopt containerBackground API 使用下面的方法解决了: 代码: extension View {func widgetBackground(_ backgroundView: some View) -> some View {if #available(iOSApplicationExtension 17.0, *) {return containerBackground(for: .wi…

【云原生】Docker私有仓库 RegistryHabor

目录 1.Docker私有仓库&#xff08;Registry&#xff09; 1.1 Registry的介绍 1.2 Registry的部署 步骤一&#xff1a;拉取相关的镜像 步骤二&#xff1a;进行 Registry的相关yml文件配置&#xff08;docker-compose&#xff09; 步骤三&#xff1a;镜像的推送 2. Regist…

k8s 安装 istio(二)

3.3 部署服务网格调用链检测工具 Jaeger 部署 Jaeger 服务 kubectl apply -f https://raw.githubusercontent.com/istio/istio/release-1.16/samples/addons/jaeger.yaml 创建 jaeger-vs.yaml 文件 apiVersion: networking.istio.io/v1alpha3 kind: VirtualService metadata…

java 高级面试题整理(薄弱技术)

session 和cookie的区别和联系 session1.什么是session Session是另一种记录客户状态的机制&#xff0c;不同的是Cookie保存在客户端浏览器中&#xff0c;而Session保存在服务器上。客户端浏览器访问服务器的时候&#xff0c;服务器把客户端信息以某种形式记录在服务器上。这就…

常用的数据可视化工具有哪些?要操作简单的

随着数据量的剧增&#xff0c;对分析效率和数据信息传递都带来了不小的挑战&#xff0c;于是数据可视化工具应运而生&#xff0c;通过直观形象的图表来展现、传递数据信息&#xff0c;提高数据分析报表的易读性。那么&#xff0c;常用的操作简单数据可视化工具有哪些&#xff1…

Dockerfile推送私有仓库的两个案例

一&#xff0c;编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。 具体要求如下&#xff1a; &#xff08;1&#xff09;基于centos基础镜像&#xff1b; &#xff08;2&#xff09;指定作者信息&#xff1b; &#xff…