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>
相关推荐
追光少年33225 分钟前
Learning Vue 读书笔记 Chapter 4
前端·javascript·vue.js
软件2056 分钟前
【Vite + Vue + Ts 项目三个 tsconfig 文件】
前端·javascript·vue.js
老大白菜25 分钟前
在 Ubuntu 中使用 FastAPI 创建一个简单的 Web 应用程序
前端·ubuntu·fastapi
渔阳节度使33 分钟前
React
前端·react.js·前端框架
LCG元2 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian2 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼3 小时前
【前端知识】常用CSS样式举例
前端·css
wl85113 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20163 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌3 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构