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>
相关推荐
ljs648273951几秒前
智慧商城(Smart Mall):基于 Spring Boot + Vue 3 的现代化电商平台实战
linux·vue.js·spring boot·后端
蜡台14 分钟前
修改Uniapp input 组件不刷新视图问题
前端·uni-app·input
逸铭18 分钟前
Day 8:Preload 是什么?——在别人的网页里打黑工还要合规
前端·客户端
张元清19 分钟前
React useLocalStorage Hook:SSR 安全的持久化状态(2026)
javascript·react.js
甜味弥漫23 分钟前
React Router:从单页应用到前端路由
javascript·node.js
柒和远方25 分钟前
Worker Readiness:为什么 `/health` 不能证明后台任务能跑
前端·后端·架构
lkshop26 分钟前
Next.js 网站 SEO 优化:从 SSR、Sitemap 到结构化数据
开发语言·javascript·ecmascript
吃糖的小孩27 分钟前
Web Owner Console 还没写前端,我先给它设计 read model
前端
析数塔28 分钟前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js