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

news2024/11/23 8:23:50

应用场景:

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

在这里插入图片描述

   <el-table
                v-if="moviePersonList"
                ref="tableStar"
                :data="moviePersonList"
                drag="true"
                stripe
                border
                class="table-bottom-bg tableStar"
                max-height="500"
            >
                <el-table-column
                    align="center"
                    prop="orderNum"
                    width="50px"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameCN"
                    label="中文名"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameEN"
                    label="外文名"
                ></el-table-column>
                <el-table-column
                    prop="chief"
                    label="主演"
                ></el-table-column>
                <el-table-column
                    prop="avatar"
                    label="角色头像"
                ></el-table-column>
                <el-table-column
                    prop="descriptionCn"
                    label="中文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="descriptionEn"
                    label="英文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="person"
                    label="人物"
                >
                </el-table-column>
                <el-table-column label="操作" width="400px;">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-edit"
                            plain
                            >编辑</el-button
                        >
                        <el-button
                            type="warning"
                            size="mini"
                            icon="el-icon-s-custom"
                            :disabled="!editable"
                            v-show="
                                item.graphyId === 1 &&
                                scope.row.chie === '否'
                            "
                            >设为主演</el-button
                        >
                        <el-button
                            size="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 = this
        let moviePersonList = _this.moviePersonList.length > 0 ? _this.moviePersonList : []
   
        Sortable.create(tbody, {
            draggable: '.el-table__row',
            forceFallback: false, 
            onEnd(evt) {
            const newIndex = evt.newIndex
            const oldIndex = evt.oldIndex
            const 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);
                    // 复原拖拽之前的 dom
                    const 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.coloradmin.cn/o/2168868.html

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

相关文章

Java面试题之JVM面试题

JVM 的主要作用是什么&#xff1f; JVM 就是 Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM 屏蔽了与具体操作系统平台相关的信息&#xff0c;使 Java 程序只需生成在 Java 虚拟机上运行的目标代码 &#xff08;字节码&#xff09;&#xff0…

uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度

实际效果 使用 //使用 let posConfig this.getPosConfig(); // 传false返回值为 px大小 console.log(posConfig.safeBottomH) // 入参 是否转换为rpxgetPosConfig(toRpx true) {const systemInfo uni.getSystemInfoSync();// #ifdef MPconst menuButtonInfo uni.getMenuBu…

Hello Algorithm:Capture 1,2 初识算法

大家好 :) 自学完sklearn的基本使用后&#xff0c;颇感无趣。虽有阅文几篇&#xff0c;却无所获。遂于24年9月26日决习hello algorithm。 &#xff1a;&#xff09; 好了&#xff0c;不开玩笑了。其实开设这篇专栏我也不知道有没有什么意义。其实是因为最近在读TaskWeaver&…

关于最小二乘法

最小二乘法的核心思想简单而优雅&#xff1a;我们希望找到一条最佳的曲线&#xff0c;使其尽可能贴近所有的数据点。想象一下&#xff0c;当你在画布上描绘一条线&#xff0c;目标是让这条线与点的距离最小。数学上&#xff0c;这可以表示为&#xff1a; 在这个公式中&#xff…

Eclipse Memory Analyzer (MAT)提示No java virtual machine was found ...解决办法

1&#xff0c;下载mat后安装&#xff0c;打开时提示 jdk版本低&#xff0c;需要升级到jdk17及以上版本&#xff0c;无奈就下载了jdk17&#xff0c;结果安装后提示没有jre环境&#xff0c;然后手动生成jre目录&#xff0c;命令如下&#xff1a; 进入jdk17目录&#xff1a;执行&…

SpringBoot的基础(自动配置)

SpringBootApplication注解 是一个组合注解&#xff0c;其中EnableAutoConfiguration让SpringBoot根据类路径中的jar包依赖为当前项目进行自动配置 例如&#xff1a;添加了spring-boot-starter-web依赖&#xff0c;会自动添加Tomcat和SpringMVC的依赖 添加了spring-boot-start…

【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第四篇-着色器投影-接收阴影部分】

上一章中实现了体积渲染的光照与自阴影&#xff0c;那我们这篇来实现投影 回顾 勘误 在开始本篇内容之前&#xff0c;我已经对上一章中的内容的错误进行了修改。为了确保不会错过这些更正&#xff0c;同时也避免大家重新阅读一遍&#xff0c;我将在这里为大家演示一下修改的…

LeetCode - 850 矩形面积 II

题目来源 850. 矩形面积 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个轴对齐的二维数组 rectangles 。 对于 rectangle[i] [x1, y1, x2, y2]&#xff0c;其中&#xff08;x1&#xff0c;y1&#xff09;是矩形 i 左下角的坐标&#xff0c; (xi1, yi1) 是该…

灵当CRM index.php接口SQL注入漏洞复现 [附POC]

文章目录 灵当CRM index.php接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 灵当CRM index.php接口SQL注入漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技…

数据治理003-数据域

数据仓库是面向主题&#xff08;数据综合、归类并进行分析利用的抽象&#xff09;的应用。 数据仓库模型设计除横向的分层外&#xff0c;通常也需要根据业务情况进行纵向划分数据域。数据域是联系较为紧密的数据主题的集合&#xff0c;通常是根据业务类别、数据来源、数据用途…

001、视频添加字幕

1. 腾讯智影 (可用) https://zenvideo.qq.com/ 1.1 操作步骤 https://zenvideo.qq.com/ https://zenvideo.qq.com/my/material?typeexport 上传资源 自动字幕识别 修改字幕 下载字幕 上传字幕 https://zenvideo.qq.com/my/material?typeexport 2. 秒剪–手机版app &a…

【Python-GUI图形化界面-PyQt5模块(3)】——Qwidget核心模块

本文旨在带大家学习Python中的一种GUI图形化界面模块——PyQt5模块&#xff0c;将为大家详细了解PyQt5模块中函数的参数和使用&#xff1a; 一、PyQt5简介 PyQt是Qt框架的Python语言实现&#xff0c;由Riverbank Computing开发&#xff0c;是最强大的GUI库之一。 官方网站&a…

Win32打开UWP应用

最近无意间发现Windows里一个神奇的文件夹。 shell:appsfolder 运行打开 这个文件夹后&#xff0c;你可以看到本机安装的所有应用程序。 我觉得这个挺方便的&#xff0c;所以做了一个简单的appFolderDialog包给C#用 项目地址&#xff1a;https://github.com/TianXiaTech/App…

大数据毕业设计选题推荐-内蒙古旅游景点数据分析系统-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

【有啥问啥】深度理解主动学习:机器学习的高效策略

深度理解主动学习&#xff1a;机器学习的高效策略 在大数据时代&#xff0c;数据量的爆炸性增长与有限的标注资源之间的矛盾日益凸显。如何高效地利用标注资源来训练高质量的模型&#xff0c;成为了机器学习领域亟待解决的问题。主动学习&#xff08;Active Learning, AL&…

Oracle RMAN 无敌备份脚本

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

网络资源模板--Android Studio 飞机大战游戏

目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--飞机大战 二、项目测试环境 三、项目详情 首页 1. **继承 Activity**: - SecondActivity 类继承自 Activity&#xff0c;表示一个新的屏幕或界面。 2. **重写 onCrea…

FLUX.1图像生成模型:AI工程师的实践与探索

文章目录 1 FLUX.1系列模型2 AI工程师的视角3 ComfyUI部署4 FLUX.1部署5 工作流6 面向未来 黑森林实验室&#xff08;Black Forest Labs&#xff09;研发的FLUX.1图像生成模型&#xff0c;以其120亿参数的庞大规模&#xff0c;正在重新定义图像生成技术的新标准。FLUX.1系列模型…

服务器数据恢复—SAN环境下LUN映射出错导致文件系统一致性出错的数据恢复案例

服务器数据恢复环境&#xff1a; SAN环境下一台存储设备中有一组由6块硬盘组建的RAID6磁盘阵列&#xff0c;划分若干LUN&#xff0c;MAP到不同业务的SOLARIS操作系统服务器上。 服务器故障&#xff1a; 用户新增了一台服务器&#xff0c;将存储中的某个LUN映射到新增加的这台服…

yolo自动化项目实例解析(六)自建UI(主窗口、预览窗口)

前面我们大致把各个代码块梳理出来了&#xff0c;但是还是不知道从那块开始&#xff0c;我们这里主要先通过ui页面的元素去推理整个执行过程&#xff0c;我们首先需要知道ui功能里面有那些组件 qt设计师基础控件 Qt Designer 是一个图形界面设计工具&#xff0c;用于创建 Qt 应…