vue3中实现elementPlus表格选中行的上移下移

先看效果:

实现步骤:

1、给el-table添加current-change事件、高亮属性及ref属性

 

2、给上移下移按钮添加事件

// 定义当前选中的行参数
const currentRow = ref<any>(null);
// 定义表格的ref
const singleTableRef = ref();
// 行选中事件
const handleCurrentChange = (val: any) => {currentRow.value = val;
};// curcelRight.value.fields是表格数据
// 上移事件
const upRow = () => {if (currentRow.value) {// 在表格数据中找到当前选中行的索引let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code);// 索引存在if (index && index > 0) {// 则利用es6中的解构赋值来实现交换两元素的位置[curcelRight.value.fields[index], curcelRight.value.fields[index - 1]] = [curcelRight.value.fields[index - 1],curcelRight.value.fields[index],];}// setCurrentRow中传入当前行可以实现不清除选中效果,可以多次上移singleTableRef.value.setCurrentRow(currentRow.value);}
};
// 下移事件
const downRow = () => {if (currentRow.value) {let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code);if (index + 1 != curcelRight.value.fields.length) {if (index > -1 && curcelRight.value.fields.length > 1) {[curcelRight.value.fields[index], curcelRight.value.fields[index + 1]] = [curcelRight.value.fields[index + 1],curcelRight.value.fields[index],];}singleTableRef.value.setCurrentRow(currentRow.value);}}
};

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

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

相关文章

正信晟锦:借了钱的人一直不接电话不回信息咋办

在金钱往来中&#xff0c;遇到借出的钱款无法按时回收&#xff0c;且借款人如同人间蒸发一般不接电话、不回信息&#xff0c;确实让人焦虑。面对这种情形&#xff0c;我们需采取明智而有效的措施&#xff0c;以保护自身的权益。 首要策略是保持冷静&#xff0c;不要让情绪主导行…

四、《任务列表案例》后端程序实现和测试

本章概要 准备工作功能实现前后联调 4.1 准备工作 数据库脚本 CREATE TABLE schedule (id INT NOT NULL AUTO_INCREMENT,title VARCHAR(255) NOT NULL,completed BOOLEAN NOT NULL,PRIMARY KEY (id) );INSERT INTO schedule (title, completed) VALUES(学习java, true),(学…

【前端素材】推荐优质在线高端蜂蜜商城电商网页Beejar平台模板(附源码)

一、需求分析 1、系统定义 在线高端蜂蜜商城是指一个专门销售高品质、高端蜂蜜产品的电子商务平台。这种商城致力于向消费者提供各种经过精心挑选、具有高营养价值和健康功效的蜂蜜产品。 2、功能需求 在线高端蜂蜜商城是指一个专门销售高品质、高端蜂蜜产品的电子商务平台…

Go字符串实战操作大全!

目录 1. 引言文章结构概览 2. Go字符串基础字符串的定义与特性什么是字符串&#xff1f;Go字符串的不可变性原则 字符串的数据结构Go字符串的内部表达byte和rune的简介 3. 字符串操作与应用3.1 操作与应用字符串连接字符串切片字符串查找字符串比较字符串的替换字符串的大小写转…

vos3000外呼系统警告消除怎么设置

你有没有发现vos3000登陆时老是提示告警&#xff0c;消除一会又出现&#xff0c;那么又什么办法能解决呢&#xff1f;要彻底消除 VOS3000 系统的警告&#xff0c;一般需要通过以下步骤来进行排查和解决&#xff1a; 确认警告信息&#xff1a;首先要明确警告的具体内容和出现的条…

旧的Spring Security OAuth已停止维护,全面拥抱最新解决方案Spring SAS

Spring Authorization Server 替换 Shiro 指引 背景 Spring 团队正式宣布 Spring Security OAuth 停止维护&#xff0c;该项目将不会再进行任何的迭代 目前 Spring 生态中的 OAuth2 授权服务器是 Spring Authorization Server 已经可以正式生产使用作为 SpringBoot 3.0 的最新…

c++异常机制(3) -- 异常类型和生命周期

目录 抛出的异常类型大致可以分为三种。 第一种 基本类型 1. 可以直接抛出常量 2. 也可以抛出定义好的变量 3. 如果我们使用const&#xff0c;会不会影响到异常的匹配。 第二种 字符串类型以及指针类型 1. 使用字符指针 注意: 2. 使用string类型 第三种 …

计算机专业大学生的简历,为何会出现在垃圾桶

为什么校招过后垃圾桶里全是简历&#xff0c;计算机专业的学生找工作有多难&#xff1f; 空哥这么跟你说吧&#xff0c;趁现在还来得及&#xff0c;这些事情你一定要听好了。 第一&#xff0c;计算机专业在学校学的东西是非常有限的&#xff0c;985211的还好&#xff0c;如果…

GPS历史轨迹优化算法的研究与实现

GPS历史轨迹优化算法的研究与实现 摘要 本研究提出了一种综合利用数据清洗、密度聚类、卡尔曼滤波和地图匹配的新算法,命名为“DSKF-Match”。该算法旨在处理GPS轨迹数据,通过清洗、聚类、平滑和匹配等步骤,提高数据的质量和准确性。首先,算法利用时间窗口法进行数据清洗…

D365:LookUp

文章目录 前言一、复制onLookUp事件方法二、LookUp方法 前言 在Form的字段的onLookUp方法中&#xff0c;添加下拉框。 一、复制onLookUp事件方法 二、LookUp方法 [FormControlEventHandler(formControlStr(EcoResProductDetailsExtended, VyaKeyItemType_VyaMaterialSubCode…

Vue2:路由守卫实现权限管理之独享路由守卫

一、情景说明 单独给某个路由组件配置守卫 二、案例 给news路由配置独享路由守卫 在进入该路由组件前&#xff0c;会触发相关函数 函数内编写鉴权功能的相关代码即可 关键配置&#xff1a;beforeEnter {name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻}…

【PyTorch知识点汇总】

PyTorch是一个广泛使用的深度学习框架&#xff0c;它提供了许多功能强大的工具和函数&#xff0c;用于构建和训练神经网络。以下是一些PyTorch的常用知识点和示例说明&#xff1a; 张量&#xff08;Tensors&#xff09; 创建张量&#xff1a;使用torch.tensor()​、torch.Tenso…

面试经典150题——用最少数量的箭引爆气球

"The only person you are destined to become is the person you decide to be." - Ralph Waldo Emerson 1. 题目描述 2. 题目分析与解析 这个题目开始读题的时候是有点不好理解题意的&#xff0c;因此我先做个图让大家对于题意有更好更直观的理解再来分析题目。 …

如何使用Portainer创建Nginx容器并搭建web网站发布至公网可访问【内网穿透】

文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…

SQL 常见命令及规范

常见命令 1. 查看当前所有数据库 show databases; 2. 打开指定的库 use 库名 ; 3. 查看当前库的所有表 show tables; 4. 查看其他库的所有表 show tables from 库名 ; 5. 创建表 cerate table 表名 ( 列名 列类型&#xff0c; 列名 列类型&#xff0c; ..... …

基于YOLO家族最新模型YOLOv9开发构建自己的个性化目标检测系统从零构建模型完整训练、推理计算超详细教程【以自建数据酸枣病虫害检测为例】

在我前面的系列博文中,对于目标检测系列的任务写了很多超详细的教程,目的是能够读完文章即可实现自己完整地去开发构建自己的目标检测系统,感兴趣的话可以自行移步阅读: 《基于官方YOLOv4-u5【yolov5风格实现】开发构建目标检测模型超详细实战教程【以自建缺陷检测数据集为…

C# OpenVINO Crack Seg 裂缝分割 裂缝检测

目录 效果 模型信息 项目 代码 数据集 下载 C# OpenVINO Crack Seg 裂缝分割 裂缝检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-29T16:35:48.364242 author&#xff1a;Ultralytics task&#xff1a;segment version&…

去掉WordPress网页图片默认链接功能

既然是wordpress自动添加的&#xff0c;那么我们在上传图片到wordpress后台多媒体的时候&#xff0c;就可以手动改变链接指向或者删除掉&#xff0c;问题是每次都要这么做很麻烦&#xff0c;更别说有忘记的时候。一次性解决这个问题有两种方法&#xff0c;一种是No Image Link插…

【生成式AI】ChatGPT原理解析(1/3)- 对ChatGPT的常见误解

Hung-yi Lee 课件整理 文章目录 误解1误解2ChatGPT真正在做的事情-文字接龙 ChatGPT是在2022年12月7日上线的。 当时试用的感觉十分震撼。 误解1 我们想让chatGPT讲个笑话&#xff0c;可能会以为它是在一个笑话的集合里面随机地找一个笑话出来。 我们做一个测试就知道不是这样…

C# Post数据或文件到指定的服务器进行接收

目录 应用场景 实现原理 实现代码 PostAnyWhere类 ashx文件部署 小结 应用场景 不同的接口服务器处理不同的应用&#xff0c;我们会在实际应用中将A服务器的数据提交给B服务器进行数据接收并处理业务。 比如我们想要处理一个OFFICE文件&#xff0c;由用户上传到A服务器…