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>
相关推荐
豆苗学前端4 分钟前
【前端内功】同为数据驱动,为什么只有 React 的"心智负担"这么重?(附实战优化指南)
前端·vue.js·面试
铁皮饭盒8 分钟前
震惊, Bun突发新版, 重写核心, 换掉了底层Zig
前端·javascript·后端
IT_陈寒18 分钟前
深入理解Java:核心原理与最佳实践
前端·人工智能·后端
恋猫de小郭20 分钟前
Android Studio 放着没怎么用,怎么也会越来越卡?
android·前端·flutter
大力夯20 分钟前
macOS 使用 n 模块管理 Node.js 版本
vue.js·macos·node.js
fanzhonghong22 分钟前
javaWeb开发之前端实战(Vue工程化+ElementPlus)
前端·javascript·vue.js·后端·spring
openKaka_24 分钟前
completeWork:真实 DOM 是在哪里被创建的
前端·javascript·react.js
bbq粉刷匠26 分钟前
了解HTML、CSS与JavaScript
javascript·css·html
希冀12329 分钟前
【CSS学习第六篇】
前端
Python大数据分析@30 分钟前
说说Markdown为什么不会被HTML取代
前端·html