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

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.lryc.cn/news/284008.html

相关文章:

  • 【PS】PS设计图欣赏、学习、借鉴
  • 游戏云化好吗?游戏云化会带来什么?
  • 制造业企业数字化转型难点剖析及解决之法
  • golang 服务端遇到strict-origin-when-cross-origin,解决跨域整理
  • 分布式事务Seata实战-AT模式(注册中心为Eureka)
  • windows vscode jsoncpp cmake c++ 构建项目
  • 按照一定规则批量修改文件夹内文件的名称
  • Git项目分支管理规范
  • ycsb压测mongodb
  • 【zip密码】Zip压缩包删除密码方法,有哪些?
  • 代码随想录算法训练营day24 || 回溯法原理讲解,77.组合
  • RPA与通知机器人的完美结合
  • openssl3.2 - 官方demo学习 - signature - rsa_pss_direct.c
  • 高效批量剪辑技巧:一键按指定时长精准分割视频的方法,轻松制作视频
  • Android基础知识
  • linux下把动态库变成静态库
  • 基于STM32单片机设计的智能水温控制系统
  • PIL——图像读取、裁剪、保存操作
  • Windows 下 QT开发环境的搭建:
  • 深度学习中Numpy的一些注意点(多维数组;数据类型转换、数组扁平化、np.where()、np.argmax()、图像拼接、生成同shape的图片)
  • (2023版)斯坦福CS231n学习笔记:DL与CV教程 (56) | 卷积神经网络
  • 表单验证 ---- 在Vue2中使用ElementUI进行表单验证
  • HarmonyOS 转场动画 ForEach控制
  • 2024--Django平台开发-订单项目管理(十四)
  • Docker 安装 CentOS
  • 方案解决:5G基站节能及数字化管理
  • JavaScript深浅拷贝的几种方式
  • VBA窗体跟随活动单元格【简易版】(2/2)
  • 个性化定制的知识付费小程序,为用户提供个性化的知识服务
  • 【轮式平衡机器人】——软硬件配置/准备