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

html 复制代码
<template>
   <!-- 省略其他配置 -->
   <el-upload ref="upload" :file-list.sync="fileList"></el-upload>
 </template>
javascript 复制代码
 <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>
相关推荐
YHHLAI5 分钟前
告别传统开发!Bun + TS 解锁前端新体验
前端
qq43569470110 分钟前
Vue01
vue.js
拾年27513 分钟前
Bun:重新定义 JavaScript 运行时 - 为什么它可能是 Node.js 的终结者?
javascript·typescript·bun
vim怎么退出14 分钟前
Dive into React——调度/并发
前端·react.js·源码阅读
秋天的一阵风17 分钟前
AGENTS.md:你的AI代码助手,需要一份"项目说明书"
前端·后端·ai编程
rising start19 分钟前
七、Vue Router
前端·vue.js·router
羊羊小栈20 分钟前
停车场管理系统(基于前后端Web开发)
前端·人工智能·毕业设计·大作业
数据知道21 分钟前
网站到底是如何通过JS读取你的浏览器指纹的?
开发语言·javascript·ecmascript·指纹浏览器
用户9385156350724 分钟前
从JS的“坑”到TS的“墙”,再到Bun与AI:打造健壮的全栈应用
前端·javascript
jserTang25 分钟前
手撕 Claude Code-7:自动压缩与记忆恢复
前端·后端