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.hqwc.cn/news/229152.html

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

相关文章

Web3 进入“殖民时代”

最近在 AI 和 Web3 领域发生了两件“大”事&#xff0c;两件事都具有指标意义&#xff0c;但在媒体上其意义都被大量的八卦细节给掩埋了。 其实看待任何重大事件&#xff0c;都可以有两种不同的视角。第一是娱乐的视角&#xff0c;在新闻事件中找乐子。如果是本着这个目的&…

LeetCode Hot100 543.二叉树的直径

题目&#xff1a; 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 方法&#xff1a;灵神 代码&#xff1a; ​…

LeetCode [中等]3. 无重复字符的最长子串

3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 1. 滑动窗口&#xff08;Sliding Window&#xff09;&#xff1a; 滑动窗口是一种用于处理数组或列表的子数组或子序列的问题…

60V 72V 输入 输出5V 2A 内置MOS 降压芯片 ESOP8封装

60V 72V 输入 输出5V 2A 内置MOS 降压芯片 SC9102 ESOP8封装

C++基础 -10- 类的构造函数

类的构造函数类型一 使用this指针给类内参数赋值 class rlxy {public:int a;rlxy(int a, int b, int c){this->aa;this->bb;this->cc;cout << "rlxy" << endl;}protected:int b;private:int c; };int main() {rlxy ss(10, 20, 30); }类的构造…

Sentaurus TCAD半导体器件入门常用案例合集

Sentaurus TCAD是用于模拟半导体器件和工艺的工具之一&#xff0c;可以帮助工程师设计电路元件&#xff0c;优化半导体工艺和器件性能。主要功能包括&#xff1a;半导体器件建模&#xff08;用于建立各种半导体器件的物理模型工艺模拟&#xff09;、半导体器件的制造工艺模拟&a…

Linux C语言 22-多进程

Linux C语言 22-进程 本节关键字&#xff1a;进程、exec函数族 相关C库函数&#xff1a;fork、getpid、getppid、getuid、geteuid、getgid、getegid、execl、execlp、execv、execvp、execle、execvpe 什么是进程&#xff1f; 进程是程序的执行过程&#xff1b;进程是动态的&…

基于多模态大数据的国家安全风险态势感知模型构建

源自&#xff1a;情报杂志 “人工智能技术与咨询” 发布 摘 要 [研究目的]为强化国家安全情报能力,推动风险监测预警能力提升,构建基于多模态大数据的国家安全风 险态势感知模型。 [研究方法]首先,对国家安全风险态势感知进行阐释;然后,分析多模态大数据驱动…

什么是算法?

一、是什么 算法&#xff08;Algorithm&#xff09;是指解题方案的准确而完整的描述&#xff0c;是一系列解决问题的清晰指令&#xff0c;算法代表着用系统的方法描述解决问题的策略机制 也就是说&#xff0c;能够对一定规范的输入&#xff0c;在有限时间内获得所要求的输出 …

交流负载的功能实现原理

交流负载的功能实现原理主要涉及到电力电子技术、电机控制技术和电力系统保护技术等多个方面。 交流负载的功能实现需要通过电力电子器件进行电能的转换和控制&#xff0c;电力电子器件主要包括开关器件和电力电子变压器等。开关器件主要用于实现电能的通断控制&#xff0c;如晶…

【古月居《ros入门21讲》学习笔记】12_服务端Server的编程实现

目录 说明&#xff1a; 1. 服务模型 说明 2. 实现过程&#xff08;C&#xff09; 创建服务器代码&#xff08;C&#xff09; 配置服务器代码编译规则 编译 运行 3. 实现过程&#xff08;Python&#xff09; 创建服务器代码&#xff08;Python&#xff09; 运行效果 说…

Buzz库python代码示例

Buzz库来编写一个下载器程序。 php <?php require_once vendor/autoload.php; // 引入Buzz库 use Buzz\Browser; use Buzz\Message\Response; $browser new Browser(); // 设置 $browser->setHttpClient(new HttpClientProxy([ host > , port > , ])…