解决sortablejs+el-table表格内限制回撤和拖拽回撤失败问题

应用场景:

table内同一类型可拖拽,不支持不同类型拖拽(主演可拖拽交换位置,非主演和主演不可交换位置),类型不同拖拽效果需还原,试了好几次el-table数据更新了,但是表格样式和数据不能及时保持一致,查阅了各位coder的经验,经过综合,实现了效果…

在这里插入图片描述

   <el-tablev-if="moviePersonList"ref="tableStar":data="moviePersonList"drag="true"stripeborderclass="table-bottom-bg tableStar"max-height="500"><el-table-columnalign="center"prop="orderNum"width="50px"></el-table-column><el-table-columnalign="center"prop="personNameCN"label="中文名"></el-table-column><el-table-columnalign="center"prop="personNameEN"label="外文名"></el-table-column><el-table-columnprop="chief"label="主演"></el-table-column><el-table-columnprop="avatar"label="角色头像"></el-table-column><el-table-columnprop="descriptionCn"label="中文"></el-table-column><el-table-columnalign="center"prop="descriptionEn"label="英文"></el-table-column><el-table-columnalign="center"prop="person"label="人物"></el-table-column><el-table-column label="操作" width="400px;"><template slot-scope="scope"><el-buttontype="primary"size="mini"icon="el-icon-edit"plain>编辑</el-button><el-buttontype="warning"size="mini"icon="el-icon-s-custom":disabled="!editable"v-show="item.graphyId === 1 &&scope.row.chie === '否'">设为主演</el-button><el-buttonsize="mini"icon="el-icon-error":disabled="!editable"v-show="item.graphyId === 1 &&scope.row.chie === '是'">设为非主演</el-button></template></el-table-column></el-table>

方法部分

    rowDrop() {let tbody = undefined  //此处兼容火狐浏览器拖动打开新页面问题tbody = this.$refs.tableStar[0].$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]const _this = thislet moviePersonList = _this.moviePersonList.length > 0 ? _this.moviePersonList : []Sortable.create(tbody, {draggable: '.el-table__row',forceFallback: false, onEnd(evt) {const newIndex = evt.newIndexconst oldIndex = evt.oldIndexconst tab = JSON.parse(JSON.stringify(moviePersonList))if (tab[oldIndex].chie !== tab[newIndex].chie) {// 复原拖拽之前的 数据const item = tab.splice(newIndex, 1)[0];tab.splice(oldIndex, 0, item);// 复原拖拽之前的 domconst tagName = evt.item.tagName;const items = evt.from.getElementsByTagName(tagName);if (evt.oldIndex > evt.newIndex) {evt.from.insertBefore(evt.item, items[evt.oldIndex+1]);} else {evt.from.insertBefore(evt.item, items[evt.oldIndex]);}_this.$message.error('主演与非主演不支持位置交换')return false}const ele = tab[oldIndex];tab.splice(oldIndex, 1)tab.splice(newIndex, 0, ele);moviePersonList = tab  // 此处必须赋值一次let list = []if(tab[newIndex].chief === '是'){tab.map (item => {if(item.chief === '是'){list.push(item.id)}})}else{tab.map (item => {if(item.chief !== '是'){list.push(item.id)}})}//  提交数据_this.comitHandle(list)}})},

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

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

相关文章

ArrayList源码实现(一)

ArrayList源码实现&#xff08;一&#xff09; 1. ArrayList的大小是如何自动增加的&#xff1f; 初始化 在构造函数中&#xff0c;可以设定列表的初始值大小&#xff0c;如果没有的话默认使用&#xff0c;提供的静态数据 public ArrayList(int initialCapacity) {if (initi…

RabbitMQ应用

RabbitMQ 共提供了7种⼯作模式, 进⾏消息传递 一、七种模式的概述 1、Simple(简单模式) P&#xff1a;生产者&#xff0c;就是发送消息的程序 C&#xff1a;消费者&#xff0c;就是接收消息的程序 Queue&#xff1a;消息队列&#xff0c;类似⼀个邮箱, 可以缓存消息; ⽣产者…

UniApp基于xe-upload实现文件上传组件

xe-upload地址&#xff1a;文件选择、文件上传组件&#xff08;图片&#xff0c;视频&#xff0c;文件等&#xff09; - DCloud 插件市场 致敬开发者&#xff01;&#xff01;&#xff01; 感觉好用的话&#xff0c;给xe-upload的作者一个好评 背景&#xff1a;开发中经常会有…

几个可以给pdf加密的方法,pdf加密详细教程。

几个可以给pdf加密的方法&#xff0c;pdf加密详细教程。在信息快速传播的今天&#xff0c;PDF文件已经成为重要的文档格式&#xff0c;被广泛应用于工作、学习和个人事务中。然而&#xff0c;随着数字内容的增加&#xff0c;数据安全和隐私保护的问题愈发凸显。无论是商业机密、…

CAT1 RTU软硬件设计开源资料分析(TCP协议+Modbus协议+GNSS定位版本 )

01 CAT1 RTU方案简介&#xff1a; 远程终端单元( Remote Terminal Unit&#xff0c;RTU)&#xff0c;一种针对通信距离较长和工业现场环境恶劣而设计的具有模块化结构的、特殊的计算机测控单元&#xff0c;它将末端检测仪表和执行机构与远程控制中心相连接。 奇迹TCP RTUGNS…

OpenHarmony(鸿蒙南向)——平台驱动指南【PWM】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 PWM即脉冲宽度调制&#xff08;Pulse Width Modul…

Flutter中使用FFI的方式链接C/C++的so库(harmonyos)

Flutter中使用FFI的方式链接C/C库&#xff08;harmonyos&#xff09; FFI plugin创建和so的配置FFI插件对so库的使用 FFI plugin创建和so的配置 首先我们可以根据下面的链接生成FFI plugin插件&#xff1a;开发FFI plugin插件 然后在主项目中pubspec.yaml 添加插件的依赖路径&…

排序--堆排序【图文详解】

二叉树的相关概念 叶子&#xff1a;没有子节点的节点叫叶子节点 大根堆&#xff1a;所有的父亲大于儿子 小根堆&#xff1a;所有的儿子大于父亲 父亲于儿子的的下标关系&#xff1a; 父亲的下标为i &#xff0c;那么左孩子的下标为2*i1&#xff0c;右孩子的下标为2i2 子的下…

智源研究院与百度达成战略合作 共建AI产研协同生态

2024年9月24日&#xff0c;北京智源人工智能研究院&#xff08;简称“智源研究院”&#xff09;与北京百度网讯科技有限公司&#xff08;简称“百度”&#xff09;正式签署战略合作协议&#xff0c;双方将充分发挥互补优势&#xff0c;在大模型等领域展开深度合作&#xff0c;共…

tomcat服务搭建部署ujcms网站

tomcat服务搭建部署ujcms网站 关闭selinux和防火墙 setenforce 0 && systemctl stop firewalld安装java环境 #卸载原有java8环境 yum remove java*#上传java软件包&#xff0c;并解压缩 tar -xf openjdk-11.0.1_linux-x64_bin.tar.gz && mv jdk-11.0.1 jdk11…

Elasticsearch讲解

1.Elasticsearch基本知识 1.基本认识和安装 Elasticsearch是由elastic公司开发的一套搜索引擎技术&#xff0c;它是elastic技术栈中的一部分。完整的技术栈包括&#xff1a; Elasticsearch&#xff1a;用于数据存储、计算和搜索 Logstash/Beats&#xff1a;用于数据收集 Kib…

【学习笔记】地平线J3J5J6E对比

内容J3J5J6ECPU 4核Cortex-A53 1.2GHz 8核Cortex-A55 1.2GHz 6核Cortex-A78AE 1.5GHz MCU/ MStar 双核锁步Cortex-MStar 2核Cortex-R52 One DCLS core pairand one Split-Lock core 1.2GHz GPU// Mail-G78AE 800MHz 100 FP32 GFLOPS BPU 2*Bernoulli-architecture 5TOPS 2…

测试部署单副本 oceanbase-3.2.4.1 企业版

由于项目需要&#xff0c;测试部署单副本 oceanbase-3.2.4.1 企业版 1.安装前提 准备4cpu,12G内存,100G磁盘 统为centos7.9 yum install -y yum-utils wget net-tools tree yum-config-manager --add-repo https://mirrors.aliyun.com/oceanbase/OceanBase.repo 2.创建用…

计算机毕业设计Hadoop+Spark知识图谱体育赛事推荐系统 体育赛事热度预测系统 体育赛事数据分析 体育赛事可视化 体育赛事大数据 大数据毕业设计

《HadoopSpark知识图谱体育赛事推荐系统》开题报告 一、研究背景及意义 随着互联网技术的迅猛发展和大数据时代的到来&#xff0c;体育赛事数据的数量呈爆炸式增长。用户面对海量的体育赛事信息&#xff0c;常常感到信息过载&#xff0c;难以快速找到感兴趣的赛事内容。如何高…

C语言中的一些小知识(三)

一、你了解printf()吗&#xff1f; 你知道下面代码的输出结果吗&#xff1f; int a123; printf("%2d \n",a); printf() 函数是 C 语言中用于格式化输出的标准函数&#xff0c;它允许你将数据以特定的格式输出到标准输出设备&#xff08;通常是屏幕&#xff09;。p…

uniapp 知识点

自定义导航 在page.json navigationstyle":"custom"navigateTo传参 页面传参只能onLoad(option)里面拿 px和upx的关系 在750设计图中&#xff0c;1px1upx 路由 navigateBack返回上一页 重定向 其实就是把当前页面干掉了 公共组件和页面共同点 computed,watc…

vue初学随笔

Vue基础 Vue基本概念 Vue是什么 Vue是一个渐进式的JavaScript框架&#xff0c;它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。 渐进式&#xff1a;各个特性可以根据项目需要逐渐引入和…

认知杂谈84《菜鸟的自我修炼:知易行难与行难知易》

内容摘要&#xff1a; 理解与行动之间的差距是日常生活的常见挑战。"知易行难"体现在理解简单但执行困难&#xff0c;例如知道蔬菜有益但难以坚持食用。而"行难知易"则是开始时困难但后来容易的任务&#xff0c;如学习骑自行车。 这种差异源于心理惰性和习…

Oracle RMAN 无敌备份脚本

1 说明 上一篇文章&#xff1a;Oracle逻辑备份脚本&#xff0c;介绍了如何部署Oracle数据库的逻辑备份脚本&#xff0c;在数据迁移场景下十分好用&#xff0c;但是作为备份来说有点牵强。仅仅有逻辑备份时&#xff0c;当故障发生后&#xff0c;逻辑备份恢复只能恢复到某一时刻…

OpenHarmony(鸿蒙南向)——平台驱动指南【MIPI CSI】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 CSI&#xff08;Camera Serial Interface&#xf…