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;
            }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

idea下载与安装,以及创建一个项目写HelloWorld

1.idea下载 Download IntelliJ IDEA – The Leading Java and Kotlin IDE (jetbrains.com) Ultimate为旗舰版&#xff0c;功能全面&#xff0c;插件丰富&#xff0c;按年收费。 Community为社区版&#xff0c;免费试用&#xff0c;功能相对而言不是很丰富&#xff0c;但是不影…

Mysql单表查询练习

一、单表查询 素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10…

【Rust】基本的语法概念

Rust初学习 常见概念变量与可变性变量常量隐藏 数据类型标量类型字符类型复合类型元组数组 函数参数语句和表达式具有返回值的函数 注释控制流使用循环重复执行 常见概念 变量与可变性 变量 fn main() {let x 5;println!("The value of x is: {x}");x 6;println…

JS异常处理——throw和try、catch以及debugger

让我为大家介绍一下异常处理吧&#xff01; 异常处理是指预估代码执行过程中可能发生的错误&#xff0c;然后最大程度的避免错误的发生导致整个程序无法继续运行 throw 抛异常 第一种写法 function fun(x, y) {// undefined是false 但取反就是trueif (!x || !y) {// 第一种写…

IMO国际奥林匹克数学竞赛推出AI-MO,奖金高达1000万美元; SDXL Turbo: 新一代文本到图像模型

&#x1f989; AI新闻 &#x1f680; IMO国际奥林匹克数学竞赛推出AI-MO&#xff0c;奖金高达1000万美元 摘要&#xff1a;IMO国际奥林匹克数学竞赛推出新的AI竞赛AI-MO&#xff0c;旨在推动大语言模型的数学推理能力&#xff0c;鼓励开发能与人类数学天才相媲美的AI模型。比…

【论文阅读笔记】Prompt-to-Prompt Image Editing with Cross-Attention Control

【论文阅读笔记】Prompt-to-Prompt Image Editing with Cross-Attention Control 个人理解思考基本信息摘要背景挑战方法结果 引言方法论结果讨论引用 个人理解 通过将caption的注意力图注入到目标caption注意力中影响去噪过程以一种直观和便于理解的形式通过修改交叉注意力的…

二分查找(Java)

二分查找&#xff0c;也称为折半查找&#xff0c;是一种在有序数组中查找特定元素的高效算法。其基本思想是每次将查找范围缩小一半&#xff0c;直到找到目标元素或确定目标元素不存在。 以下是二分查找的详细步骤&#xff1a; 初始化左右边界&#xff1a;将初始查找范围设置…

台灯怎么选对眼睛好?适合考研使用的护眼台灯推荐

现在晚上仍然需要工作、学习的人有很多&#xff0c;这样的一件事似乎已经成为“家常便饭”&#xff0c;尤其事对于一些学生党而言。每天都有写不完的作业、做不完的功课&#xff0c;这样高强度的用眼下来&#xff0c;容易导致眼睛疲劳、近视等等。很多人会选择在夜晚的时候使用…

webpack如何处理css

一、准备工作 新建目录 添加样式 .word {color: red; } index.js添加dom元素&#xff0c;添加一个css word import ./css/index.css;const div document.createElement("div"); div.innerText "hello word!!!"; div.className "word"; do…

(附源码)基于NET学生信息管理系统-计算机毕设 24077

基于NET学生信息管理系统 摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用C#技术建…

【c++|SDL】开始使用之---demo

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 SDL 记录 1. hello word #include<SDL2/SDL.h>SDL_Window* g_pWindow 0; SDL_Renderer* g_pRenderer 0;int main(int argc, char* args[]) {//…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑不确定性的火电发电商现货-深度调峰市场优化决策》

标题涉及到电力行业的领域&#xff0c;尤其是火电发电商在电力市场中面对深度调峰需求时的决策问题。下面是对标题的解读&#xff1a; 考虑不确定性&#xff1a; 这指的是在制定优化决策时&#xff0c;考虑到环境的不确定性&#xff0c;可能包括但不限于电力市场的价格波动、发…

ASP.NET Core Web API设置响应输出的Json数据格式的两种方式

前言 在ASP.NET Core Web API中设置响应输出Json数据格式有两种方式&#xff0c;可以通过添加System.Text.Json或Newtonsoft.JsonJSON序列化和反序列化库在应用程序中全局设置接口响应的Json数据格式&#xff0c;本文示例使用的是新的Minimal API模式。 JSON序列化和反序列化库…

访问对象的方式

创建对象自然是为了后续使用该对象&#xff0c;我们的Java程序会通过栈上的reference数据来操作堆上的具体对象。由于reference类型在《Java虚拟机规范》里面只规定了它是一个指向对象的引用&#xff0c;并没有定义这个引用应该通过什么方式去定位、访问到堆中对象的具体位置&a…

基于SSM的老年公寓信息管理(有报告)。Javaee项目

演示视频&#xff1a; 基于SSM的老年公寓信息管理&#xff08;有报告&#xff09;。Javaee项目 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMvc …

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

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

15.Docker-Compose的概念理解及安装

1.Docker-Compose是什么&#xff1f; Docker-Compose是实现对Docker容器集群的快速编排的工具软件。它是Docker官方开源的一个工具软件&#xff0c;可以管理多个Docker容器组成一个应用。你需要定义一个YAML格式的配置文件docker-compose.yml.写好多个容器间的调用关系&#x…

佳易王个体诊所管理系统电子处方软件,个体诊所人员服务软件,卫生室配方模板电子病历系统教程

佳易王个体诊所管理系统电子处方软件&#xff0c;个体诊所人员服务软件&#xff0c;卫生室配方模板电子病历系统教程 软件试用版下载可以点击最下方官网卡片 软件功能&#xff1a; 1、配方模板&#xff1a;可以自由添加配方分类&#xff0c;预先设置药品配方&#xff0c;可以…

力扣hot100 最大子数组和 动态规划 分治 无后效性 子问题划分

&#x1f468;‍&#x1f3eb; 题目地址 无后效性 为了保证计算子问题能够按照顺序、不重复地进行&#xff0c;动态规划要求已经求解的子问题不受后续阶段的影响。这个条件也被叫做「无后效性」。换言之&#xff0c;动态规划对状态空间的遍历构成一张有向无环图&#xff0c;遍…

《许犁庭与柔性世界》第二十五章 藤乃伊

“据说虽然内院被外殿层层环绕&#xff0c;可它们却分属不同系统&#xff0c;是也不是&#xff1f;”台下有人问道。 “没错。就算你天赋异禀&#xff0c;外殿九层一路闯将过去&#xff0c;顺利成为命运师。可若是没收到不忍大师的邀请函&#xff0c;也绝无可能进入内院。” “…