利用sortablejs实现拖拽排序

import Sortable from "sortablejs";

created() {//禁止火狐拖拽进行搜索document.body.ondrop = function(event){event.preventDefault();event.stopPropagation();}}// 打开对话框的时候调用下openCustomDialog(){this.rowDrop()}// 行拖拽
rowDrop() {this.$nextTick(() => {this.sortable1 = Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"),{handle: ".drag-btn",onEnd: ({ newIndex, oldIndex }) => {this.tableData.splice(newIndex,0,this.tableData.splice(oldIndex, 1)[0]);var newArray = this.tableData.slice(0);this.tableData = [];this.$nextTick(function () {this.tableData = newArray;});},});});
},
      <el-dialogtitle="自定义":visible.sync="customDialogVisible"v-if="customDialogVisible":append-to-body="true"width="20%"><el-table:data="tableData"class="form_table"borderfithighlight-current-row><el-table-columnprop="sort"label="拖拽更换顺序"align="center"><i class=" el-icon-sort drag-btn"></i></el-table-column><el-table-columnprop="desc"label="图片类型"align="center"></el-table-column></el-table><div class="btns"><el-button @click="cancelCustomDialog">取消</el-button><el-button type="primary" @click="confirmCustomDialog" :loading="loading">确定</el-button></div></el-dialog>

<style scoped>
//悬停出现鼠标
.drag-btn{cursor: pointer;
}
</style>

注意:drag-btn 这个可以修改,但是上下要对应上

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

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

相关文章

Linux工具(包含sudo提权与vim快捷配置)

目录 什么是软件包 查看软件包 如何安装软件 1.官方yum源下载 2.扩展yum源下载 如何卸载软件 补充知识如何将普通用户加入白名单 补充知识rzsz vim编辑器 1.命令模式&#xff08;进入默认为这个模式&#xff09;用户所有的输入都会被当成命令 2.插入模式 3.底行模…

SpringCloud Maven多模块项目导包

目录 一、父项目配置 二、配置子项目 三、Maven执行 四、运行Jar包 一、父项目配置 所有父项目均需确保配置了 <packaging>pom</packaging> 因为Maven某人的打包方式是 <packaging>jar</packaging> 二、配置子项目 仅在有SpringBoot启动类的…

Qt Designer 中设置信号与槽,QT5的四种编辑模式

目录 QT5的四种编辑模式 Qt Designer 中设置信号与槽 Qt Designer 中设置信号与槽 QT5的四种编辑模式 在QT5中,特别是在使用Qt Designer进行界面设计时,存在多种编辑模式以满足不同的开发需求。以下是对QT5中四种主要编辑模式的详细解释: 控件编辑模式(Edit Widgets):…

速盾:cdn高防免备案

云计算和互联网技术的发展&#xff0c;带来了无数便利和机遇&#xff0c;但也带来了各种网络安全威胁。网站被黑、DDoS攻击、敏感信息泄露等问题&#xff0c;给企业和个人带来了巨大的损失和风险。因此&#xff0c;保护网络安全成为了当务之急。 CDN&#xff08;Content Deliv…

【PHP项目实战训练】——使用thinkphp框架对数据进行增删改查功能

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Python网页爬虫爬取豆瓣Top250电影数据——Xpath数据解析

Python网页爬虫爬取豆瓣Top250电影数据——Xpath数据解析 将使用Python网页爬虫爬取豆瓣电影Top250的电影数据&#xff0c;网页解析方法使用xpath。 获取数据后会将数据保存到CSV文件中。一、分析网页&#xff0c;初步获取信息 1.1 查看原页面信息 首先打开豆瓣Top250电影页…

操作系统期末快速复习(概念)

文章目录 第一章&#xff1a;操作系统引论操作系统的目标是什么&#xff1f;分时系统是什么&#xff1f;实时系统是什么&#xff1f;分时系统和实时系统的比较操作系统的基本特征是什么&#xff1f;操作系统的主要功能&#xff1f;***重要第二章&#xff1a;进程管理程序的顺序…

【编译报错】syntax error near unexpected token `(‘

背景&#xff1a; 在android.bp中是这样写的 cflags: ["-DEXPORT__attribute__((visibility(\"default\")))","-D__ANDROID_VNDK__",],想转换成android.mk&#xff1a; LOCAL_CFLAGS : -DEXPORT__attribute__((visibility("default")…

ClassCastException(类转换异常)可能原因和解决方法总结

ClassCastException(类转换异常)可能原因和解决方法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;ClassCastException是Java中常见的异常之一&#xff0c…

Ant design Vue 表格中显示不同的状态(多条件显示)

比如&#xff1a;后端一个字段有多种状态&#xff1a; 那么后端接口会返回&#xff1a;0 或者 1 或者 2 其中一个&#xff0c;前端需要展示的是对应的文字&#xff0c;像简单的只有两个状态的可以直接在列里面操作&#xff1a; {title: 状态,dataIndex: usable,customRender: …

Windows10任务栏卡顿解决方案

一、重新启动任务资源管理器 右键底部任务栏选择“任务管理器”&#xff1b;按快捷键“CtrlShiftEsc”&#xff1b;搜索框搜索“任务管理器”并单击“打开”&#xff1b;“WinX”打开开始菜单附属菜单&#xff0c;在列表中选择“任务管理器” &#xff1b;按下“ctrlaltdelete”…

网上考试系统设计文档

网上考试系统设计文档 1. 引言 1.1 目的 本设计文档旨在为“网上考试系统”的开发提供详细的指导方案。系统旨在提供一个全面的在线考试平台&#xff0c;支持在线考试、考试管理以及系统设置等功能&#xff0c;以满足教育机构和教师对考试流程的高效管理和优化需求。 1.2 范…

黄仁勋子女经历曝光:不卷名校,加入英伟达前开餐厅当厨子...

上周&#xff0c;黄仁勋脱下他那标志性的皮夹克&#xff0c;换上黑黄色的学位服&#xff0c;面对加州理工大学近600名毕业生发表演讲。 他提到&#xff0c;“忍受痛苦、应对挫折和看到机遇是我的超能力。” 面对美国媒体的采访&#xff0c;他多次回忆起自己充满逆境的童年&am…

【numpy】知识点和内容的详细解答-2024年6月21日

用户: ∗∗ 在 NumPy 中&#xff0c;ndarray 对象&#xff08;即多维数组&#xff09;要求数组中所有元素的类型必须相同&#xff08;因为所有元素的类型都必须相同&#xff0c;具有了一定的同一性&#xff0c;这就在最大程度上面优化了内存和计算效率&#xff09;&#xff0c;…

【SQL】drop、delete 与 truncate 的区别

在数据库管理中&#xff0c;DROP、DELETE 和 TRUNCATE 是用于删除数据或表的命令&#xff0c;但它们有不同的用途和效果。以下是它们的详细区别&#xff1a; 1. DROP DROP 语句用于删除整个数据库对象&#xff08;如表、视图、索引等&#xff09;。一旦对象被删除&#xff0c…

ipython一些使用方法

使用自动补全和Tab键&#xff1a; IPython 提供了强大的自动补全功能。当你开始键入一个变量名或函数名时&#xff0c;按下 Tab 键会显示可能的补全选项。如果有多个选项&#xff0c;再次按下 Tab 键会列出所有选项。使用历史命令&#xff1a; 你可以使用 %history 命令查看之前…

CVPR 2024 以物体为中心的多感知具身大语言模型

CVPR 2024发表了关于多感知以对象为中心的具身大型语言模型&#xff08;MultiPLY&#xff09;的研究论文&#xff0c;该模型在3D环境中进行编码和交互。 提出MultiPLY是一个多感知的具身大型语言模型&#xff08;LLM&#xff09;&#xff0c;能够将视觉、听觉、触觉和温度等多…

MySQL入门学习-连接查询.INNER JOIN

表的连接在数据库中扮演着至关重要的角色。当我们处理多个表之间的关联数据时&#xff0c;连接查询是必不可少的。 假设我们有两个表 A 和 B&#xff0c;它们有一个共同的字段。现在&#xff0c;我们想从 A 和 B 中选择出所有匹配的数据。这就是连接查询的作用。 以下是一个基本…

CSS样式与视觉效果讲解

文章目录 CSS样式与视觉效果讲解1. 样式与视觉效果1.1 颜色与背景&#xff08;Colors and Backgrounds&#xff09;1.1.1 颜色&#xff08;Color&#xff09;1.1.2 背景颜色&#xff08;Background Color&#xff09;1.1.3 背景图片&#xff08;Background Image&#xff09;1.…

本地快速部署大语言模型开发平台Dify并实现远程访问保姆级教程

文章目录 前言1. Docker部署Dify2. 本地访问Dify3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 前言 本文主要介绍如何在Linux Ubuntu系统使用Docker快速部署大语言模型应用开发平台Dify,并结合cpolar内网穿透工具实现公网环境远程访问…