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>
相关推荐
IT_陈寒4 小时前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
kyriewen4 小时前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
WebInfra5 小时前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州5 小时前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang4536 小时前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家7 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Asize7 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙7 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
Mahut7 小时前
我用 Electron + FFmpeg 做了一个本地视频处理工作站 ClipForge
前端·ffmpeg·electron
前端Hardy7 小时前
又一个 AI 神器火了!
前端·javascript·后端