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>
相关推荐
im_AMBER14 分钟前
React 12
前端·javascript·笔记·学习·react.js·前端框架
开开心心就好14 分钟前
电脑音质提升:杜比全景声安装详细教程
java·开发语言·前端·数据库·电脑·ruby·1024程序员节
午安~婉25 分钟前
HTML CSS八股
前端·css·html
有事没事实验室26 分钟前
css变量
前端·css
前端付豪38 分钟前
Vue 中的 JSX:让组件渲染更灵活的正确方式
前端·javascript·vue.js
在泡泡里39 分钟前
前端规范【四】eslint(antfu)、lefthook、commitlint
前端
烛阴40 分钟前
Python 几行代码,让你的照片秒变艺术素描画
前端·python
Jolyne_1 小时前
如何实现无感刷新Token
前端
用户4099322502121 小时前
Vue3响应式系统的底层原理与实践要点你真的懂吗?
前端·ai编程·trae
apollo_qwe1 小时前
Vue 权限控制神技!自定义 auth 指令优雅实现按钮级权限管理
vue.js·架构