element-ui的el-upload组件实现上传拖拽排序图片顺序(sortablejs)

<template><!-- 省略其他配置 --><el-upload ref="upload" :file-list.sync="fileList"></el-upload></template>
 <script>import Sortable from 'sortablejs';export default {data() {return {fileList: []};},mounted() {this.initDragSort();},methods: {// 支持拖拽排序initDragSort() {const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0];Sortable.create(el, {onEnd: ({ oldIndex, newIndex }) => {// 交换位置const arr = this.fileList;const page = arr[oldIndex];arr.splice(oldIndex, 1);arr.splice(newIndex, 0, page);}});}}};</script>

在这里插入图片描述

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

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

相关文章

【数据结构与算法】排序算法:冒泡排序,冒泡排序优化,选择排序、选择排序优化

目录 一、冒泡排序 1、冒泡排序思想 2、冒泡排序算法的性能分析 代码实现&#xff1a; 二、选择排序 1、选择排序思想 2、选择排序算法的性能分析 代码实现&#xff1a; 一、冒泡排序 1、冒泡排序思想 冒泡排序的基本思想是通过相邻元素之间的比较和交换来逐步将最大…

基于springboot+vue的房产销售系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

UI自动化Selenium 无头模式运行

1、导入浏览器参数设置 from selenium.webdriver.chrome.options import Options 2、创建参数&#xff0c;并使用无厘头模式创建driver对象 opt Options() # 新建参数对象 opt.add_argument("--headless") # 无头 self.driver webdriver.Chrome(optionsopt) …

List详解,线性表

什么是List 在集合框架中&#xff0c;list是一个接口&#xff0c;继承自collection&#xff0c;collection也是接口&#xff0c;继承自Iterable&#xff1b; Iterable是一个接口&#xff0c;表示实现该接口的类是可以逐个元素进行遍历的&#xff0c;如下&#xff1a; 第一个是…

游卡:OceanBase在游戏核心业务的规模化降本实践

从 2023 年 9 月测试 OceanBase&#xff0c;到如今 3 个核心业务应用 OceanBase&#xff0c;国内最早卡牌游戏研发者之一的游卡仅用了两个月。是什么原因让游卡放弃游戏行业通用的 MySQL方案&#xff0c;选择升级至 OceanBase&#xff1f;杭州游卡网络技术有限公司&#xff08;…

密码产品推介 | 沃通安全电子签章系统(ES-1)

产品介绍 沃通安全电子签章系统&#xff08;ES-1&#xff09;是一款基于密码技术、完全自主研发的商用密码产品&#xff0c;严格遵循国家密码管理局制定的相关标准&#xff0c;可为企业和个人提供安全、合规的电子签章功能服务。产品的主要用途是为各类文书、合同、表单等电子…

半波整流电路原理详解+参数与计算公式

什么是半波整流电路&#xff1f; 半波整流电路的基本操作非常简单&#xff0c;输入信号通过二极管&#xff0c;由于只能通过一个方向的电流&#xff0c;二极管的整流作用&#xff0c;单个二极管只允许通过一半的波形。 下图说明了半波整流电路的基本原理。 半波整流电路工作图…

自动驾驶概述

自动驾驶技术主要解决的问题 无人驾驶分级 L1:巡航定速(ACC),巡航装置可以纵向控制车辆,可以加速减速 L2:车道保持辅助,系统可以纵向控制也可以横向控制汽车,但车是辅助,人才是主导。 L2.5:可以提供简单路况下的变道能力,比如特斯拉。 L3:L2的基础上提供变道能力,…

PGSQL主键序列

PostgreSQL和 MySQL数据库还是有一定的区别。 下面了解一下 PGSQL的主键序列。 一、主键 1、系统自带主键序列 在 PostgreSQL 中&#xff0c;GENERATED BY DEFAULT 和 GENERATED ALWAYS 是用于定义自动生成的列&#xff08;Generated Column&#xff09;的选项。一般可作用…

C#根据 App.config 文件中的配置信息去查找并加载指定目录下的 DLL

C#根据 App.config 文件中的配置信息去查找并加载指定目录下的 DLL System.IO.FileNotFoundException:“未能加载文件或程序集“AliNPOIExcel, Version1.0.0.0, Cultureneutral, PublicKeyTokennull”或它的某一个依赖项。系统找不到指定的文件。” 如何让程序识别不同目录下…

Scrcpy:掌握你的Android设备

Scrcpy&#xff1a;掌握你的Android设备 本文将介绍Scrcpy工具&#xff0c;它是一种强大的安卓设备控制工具&#xff0c;可以实现屏幕镜像、操作控制等功能。我们将探讨Scrcpy的基本原理和工作方式&#xff0c;并介绍如何使用Scrcpy连接和控制安卓设备。此外&#xff0c;我们还…

conda环境下wget: command not found解决方案

1 问题描述 window10的conda环境下&#xff0c;运行程序&#xff0c;报如下错误 sh download_model.sh mkdir: cannot create directory ‘data’: File exists download_model.sh: line 4: wget: command not found download_model.sh: line 5: wget: command not found mkd…

基于Prism框架的WPF前端框架开发《知产代理数字化解决方案》

最近新开发了一套WPF前端界面框架&#xff0c;叫《知产代理数字化解决方案》&#xff0c;采用了时下流行的Prism框架作为整个系统的基础架构&#xff0c;演示了Prism中的IRegionManager区域管理器、IDialogAware对话框、IDialogService对话框服务、IContainerExtension容器等用…

CentOS搭建DNS服务器

服务器规划 DNS服务器IP为&#xff1a;172.16.32.253 需要自定义域名解析 172.16.32.253 dns.zhangsan.com 172.16.32.128 test1.zhangsan.com 172.16.32.129 test2.zhangsan.com 172.16.32.130 www.zhangsan.com 1. 服务器初始化 [rootlocalhost ~]# hostnamectl set-hostnam…

源码:Spring常规Bean创建过程

Bean创建过程&#xff1a; 一、版本 5.3.10二、学习内容 Bean创建过程源码三、Bean生命周期 时间轴地址&#xff1a;点击 四、bean创建过程脑图总结 脑图地址&#xff1a;点击 五、源码过程 说明&#xff1a; bean创建入口一般都是通过getBean(xxx);方法进入的&#xf…

elasticsearch[一]-索引库操作(轻松创建)、文档增删改查、批量写入(效率倍增)

elasticsearch[一]-索引库操作(轻松创建)、文档增删改查、批量写入(效率倍增) 1、初始化 RestClient 在 elasticsearch 提供的 API 中&#xff0c;与 elasticsearch 一切交互都封装在一个名为 RestHighLevelClient 的类中&#xff0c;必须先完成这个对象的初始化&#xff0c;…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-热门帖子推荐显示实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

李沐《动手学深度学习》线性神经网络 softmax回归

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 目录 系列文章一、softmax回归&#xff08;一&#xff09;问题背景&#xff08;二&#xff09;网络架构&#xf…

C# WebApi传参及Postman调试

概述 欢迎来到本文&#xff0c;本篇文章将会探讨C# WebApi中传递参数的方法。在WebApi中&#xff0c;参数传递是一个非常重要的概念&#xff0c;因为它使得我们能够从客户端获取数据&#xff0c;并将数据传递到服务器端进行处理。WebApi是一种使用HTTP协议进行通信的RESTful服…

数据分析案例-图书书籍数据可视化分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…