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>
相关推荐
一只小bit几秒前
Qt MainWindow:主窗口组件的介绍与正确使用
前端·c++·qt
Macbethad16 分钟前
半导体EFEM设备TwinCAT程序设计方案
java·前端·网络
ggaofeng21 分钟前
理解npm的原理
前端·npm·node.js
摘星编程22 分钟前
React Native for OpenHarmony 实战:SnapCarousel 轮播组件详解
javascript·react native·react.js
电商API_1800790524725 分钟前
1688商品详情采集API全解析:技术原理、实操指南与业务落地
大数据·前端·人工智能·网络爬虫
記億揺晃着的那天26 分钟前
Chrome 自动填充“用户名”到普通输入框 - 解决方案
前端·chrome
摘星编程39 分钟前
React Native for OpenHarmony 实战:PagingScroll 分页滚动详解
javascript·react native·react.js
LawrenceLan44 分钟前
Flutter 零基础入门(二十一):Container、Padding、Margin 与装饰
开发语言·前端·flutter·dart
96771 小时前
初始web server的认识1---webserver的用途和工作流程
前端
叫我:松哥1 小时前
基于神经网络算法的多模态内容分析系统,采用Flask + Bootstrap + ECharts + LSTM-CNN + 注意力机制
前端·神经网络·算法·机器学习·flask·bootstrap·echarts