vue.draggable拖拽——岗位切换如何判断?

 有一个业务场景:把一个单位的某个岗位的人,从某某市A岗位调离出来后,又拖拽回去,如果是回到某某市A岗位,则没有变化,若是换了岗位,则会把色块变成红色,表示岗位的变化。

方法一:首先思考的是拿到拖拽这个人的index下标,(但是分页的话还要单独的处理)再判断拖拽回去的下标,如果下标一志则表示回到了原岗位。但是会有一个弊端,若是我一次性拖拽了多个人,如何处理他原来的下标?可以通过岗位ID,也就是拖拽的时候,把岗位ID带到拖拽的数据里面,拖回去的时候对岗位ID进行判断。

方法二:在我们点击查看详情的时候,就把人员ID存在一个数组里面。 定义一个cValue.rootCardersId=[],在遍历的时候,把人员IDpush进数组。

  arr.forEach(cValue => {cValue.rootCardersId=[]cValue.SimuCadres.forEach((ccValue, index) => {ccValue.isActive = false;ccValue._index = index;ccValue.isRoot = true;cValue.rootCardersId.push(ccValue.cid)});});

 在拖拽里面写一个逻辑,遍历拖拽行的干部ID数组,进行一个判断,如果id与拖入的干部id一样的话,就给拖入的这个人一个isRoot。

   // 拖入的人来自本岗位,则为true不显示红色底色,不为本岗位则显示红色let isExict=false;draggedItem.rootCardersId.map(item=>{if(item==e.item._underlying_vm_.CadreID){isExict=true;}})e.item._underlying_vm_.isRoot=isExict?true:false

通过isROOT来动态绑定一个class: 

<span :class="{ 'gangweibiandong': !citem.isRoot }">{{ citem.xm  }}</span>.gangweibiandong{background: rgb(182, 66, 74);color: #fff;}

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

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

相关文章

Maven 介绍

文章目录 什么是 maven为什么要选择mavenmaven 仓库什么是maven中央仓库什么是maven本地仓库 idea如何创建出maven项目如何引入第三方库依赖配置国内源 下载 Maven Helper 插件查看各个项目之间的依赖关系 什么是 maven Maven是 Apache 下的一个纯 Java 开发的开源项目&#x…

DDD 系统间的七种关系梳理与实践

系统间的七种关系 本节将根据耦合度从高到低逐一探讨这些关系。耦合度高有时并不是坏事&#xff0c;它能够让团队内部的系统更加内聚&#xff0c;而不是无法整合的碎块。我们应该根据具体情况进行选择。 因为系统间关系往往也是组织架构的反映&#xff0c;此处每种关系除了描…

超卓航科聚国内外专家学者,共推冷喷涂技术的发展与应用

11月24日——26日&#xff0c;冷喷涂技术及其在增材制造中的应用专题会在襄阳召开&#xff0c;来自国内外200多名科技工作者齐聚一堂&#xff0c;共同交流冷喷涂技术的研究与应用。 本次专题研讨会由中国机械工程学会表面工程分会主办&#xff0c;湖北超卓航空科技股份有限公司…

【EasyExcel实践】导出多个sheet到多个excel文件,并压缩到一个zip文件

文章目录 前言正文一、项目依赖二、封装表格实体和Sheet实体2.1 表格实体2.2 Sheet实体 三、核心实现3.1 核心实现之导出为输出流3.2 web导出3.3 导出为字节数组 四、调试4.1 构建调试用的实体类4.2 控制器调用4.3 测试结果 五、注册大数转换器&#xff0c;长度大于15时&#x…

webGL开发虚拟实验室

开发虚拟实验室是一个具有挑战性但也非常有趣和有价值的任务。通过 WebGL&#xff0c;你可以创建交互式、沉浸式的虚拟实验室&#xff0c;使用户能够进行实验和学习。以下是一些步骤和关键考虑因素&#xff0c;帮助你开始开发虚拟实验室&#xff0c;希望对大家有所帮助。北京木…

游戏开发原画的设计方法

游戏原画设计是游戏开发中至关重要的一环&#xff0c;因为它直接影响到游戏的视觉吸引力和用户体验。以下是一些常见的游戏原画设计方法&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 理解游戏概念&…

如何在Python中操作Redis数据库

目录 一、安装redis-py库 二、连接Redis数据库 三、执行操作 1、设置和获取键值对 2、删除键值对 3、获取列表数据 四、处理数据 1、使用哈希表&#xff08;Hash&#xff09;处理关联数据 2、使用列表&#xff08;List&#xff09;处理有序数据 3、使用集合&#xff…

链接共享平台LinkStack

什么是 LinkStack &#xff1f; LinkStack 是一个独特的平台&#xff0c;为在线管理和共享链接提供了高效的解决方案。平台提供了一个类似于 Linktree 的网站&#xff0c;它可以让用户克服社交媒体平台上只能添加一个链接的限制。借助 LinkStack&#xff0c;用户可以轻松链接到…

8 有损压缩的.jpg图片文件格式详解,解封装拆包

有损压缩的.jpg文件 作者将狼才鲸创建日期2023-11-28 1&#xff09;简述 JPEG文件描述 JPEG协议格式分为JPEG、渐进式JPEG&#xff08;图片先显示一部分再显示全部&#xff09;、JPEG2000&#xff08;压缩品质更好&#xff0c;压缩率更高&#xff09;压缩模式&#xff1a;顺序…

苹果mac屏幕投屏镜像工具AirServer2024

airserver 是什么软件&#xff1f;AirServer 是一款 Airplay Mac屏幕镜像应用&#xff0c;AirServer可以通过 mac 实时接收iPhone、iPad以及Android设备的实时屏幕画面。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器。在您的大屏幕上启用 AirServer …

Databend 开源周报第 121 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持追加流 Da…

python之pyqt专栏7-信号与槽3

在上一篇文章中python之pyqt专栏6-信号与槽2-CSDN博客中&#xff0c;我们可以了解到对象可以使用内置信号&#xff0c;这些信号来自于类定义或者继承过来的。我们可以对这些信号可以通过connect连接槽函数。 需求 现在有一个需求&#xff0c;有两个UI界面“untitled.ui”和“u…

如何集成一个TypeScript开发环境?

首先要安装个node.js。Node.js (nodejs.org) 然后我们随便建一个文件夹&#xff0c;并且打开它运行到终端 然后再运行命令&#xff1a; npm install typescript -g 成功后 尝试使用 tsc -v 查看版本 接下来再使用命令&#xff1a; tsc --init 我们在.ts文件中尝试输出一些…

.mat格式文件是什么?及将png,jpg,bmp,gif,tiff,psd等格式图片转为.mat格式(附代码)

很多深度学习网络的输入要求为.mat格式&#xff0c;当然也可以直接修改输入数据的代码&#xff0c;比如修改为使用OpenCV读取图片等&#xff0c;但有些网络修改起来比较麻烦&#xff0c;且.mat数据有很多优势&#xff0c;所以部分网络最好还是用默认的.mat格式数据 目录 一、.…

【从零开始学习Linux】一文带你了解yum周边生态及vim常见模式

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;Linux入门 &#x1f52d;【从零开始学习Linux】系列均属于Linux入门&#xff0c;主要包含Linux操作系统下的指令、操作、权限以及开发工具&a…

​无人机摄影测量

无人机摄影测量技术是传统航空摄影测量手段的有力补充&#xff0c;具有机动灵活、高效快速、精细准确、作业成本低、生产周期短、影像获取空间分辨率高、高危地区探测等优势。无人机与航空摄影测量相结合使得“无人机数字低空遥感”成为航空遥感领域的一个崭新发展方向。无人机…

盘点67个Android系统源码安卓爱好者不容错过

盘点67个Android系统源码安卓爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 源码下载链接&#xff1a;https://pan.baidu.com/s/1zOSFwPJwDJLFfoeRJy9llg?pwd8888 提取码&#xff1a;8888 项目名称 Accelera…

VT-VRPA2-1-1X/V0/T5控制4WRE6比例方向阀放大板

带阀芯位移反馈不带集成式放大器比例方向阀控制放大器&#xff0c;替代力士乐同型号产品&#xff0c;可以完全互换使用&#xff1b;适用于控制力士乐系列带电位置反馈的4WRE6通径和4WRE10通径2X系列比例方向阀&#xff1b;0~10V、4~20mA指令控制信号任意可选&#xff1b;直接安…

[前端] V8引擎编译原理

文章目录 1.什么是V81.1 扫描器Scanner1.2 解析器parser1.3 预解析PreParser1.4 解释器Ignition1.5 编译器TurboFan 1.什么是V8 V8是谷歌的开源高性能JavaScript和WebAssembly引擎&#xff0c;用C编写。它被用于Chrome和Node.js等。它实现ECMAScript和WebAssembly&#xff0c;…

网易区块链

目录 网易区块链 网易区块链 网易区块链成立于2017年,致力于Web3.0区块链技术的研发和应用。自主研发的区块链“天玄”引擎,在单链场景下支持每秒最高30万笔交易,单日可处理上链数据超10亿。 与国家信息中心、杭州互联网公证处等机构合作,支持公证信息存储与算法解决方案…