当前位置: 首页 > article >正文

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.kler.cn/a/156428.html

相关文章:

  • vue3项目中内嵌vuepress工程两种实现方式
  • git commit 校验
  • 零基础玩转IPC之——海思平台实现P2P远程传输实验(基于TUTK,国科君正全志海思通用)
  • git status 命令卡顿的排查
  • 【入门篇】A+B Problem——多语言版
  • vue3+vite搭建脚手架项目本地运行electron桌面应用
  • Kubernetes(K8s)_15_CNI
  • linux 内核对象介绍
  • Python的模块与库,及if __name__ == ‘__main__语句【侯小啾python领航班系列(二十四)】
  • SimCSE论文阅读
  • 2023年年末Java面试题
  • Spring Task 定时任务框架
  • read()之后操作系统都干了什么
  • 自动驾驶学习笔记(十四)——感知算法
  • Ai2 Starter模拟器:中文绿色最新版下载及使用方法
  • Pytorch进阶教学——训练一个图像分类模型(GPU)
  • 【开源】基于Vue.js的假日旅社管理系统
  • Python词频统计(数据整理)
  • 【开源】基于JAVA语言的APK检测管理系统
  • 2024年甘肃省职业院校技能大赛(中职教师组)网络安全竞赛样题卷④
  • h5进行svga动画礼物特效播放的代码实现队列按顺序播放
  • 终端安全管理软件是监控软件吗
  • Cesium 展示——新增需求和分析
  • 2023年关于爬取Bilibili(B站)视频的一些最新资源和案例
  • Synchronized关键字的底层原理
  • 关系型数据库的数据隔离级别Read Committed与Repeatable Read