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>
相关推荐
hashiqimiya2 小时前
JavaScript的object的使用和监控打印日志
前端·javascript·vue.js
颜酱2 小时前
从0到1实现通用微任务调度器:理解前端异步调度核心
前端
梦6503 小时前
Vue 组件 vs React 组件深度对比
javascript·vue.js·react.js
2501_946230983 小时前
Cordova&OpenHarmony提醒管理系统实现
android·javascript
C_心欲无痕3 小时前
vue3 - useId生成唯一标识符
前端·javascript·vue.js·vue3
KoalaShane3 小时前
El-slider 增加鼠标滚动滑块事件
开发语言·前端·javascript
栀秋6663 小时前
Tailwind CSS:用“类名编程”重构你的前端开发体验
前端·css
C_心欲无痕3 小时前
vue3 - watchSyncEffect同步执行的响应式副作用
开发语言·前端·javascript·vue.js·vue3
用泥种荷花3 小时前
【前端学习AI】FewShotPromptTemplate
前端
小魔女千千鱼3 小时前
在 Vue 中,this 的行为在箭头函数和普通函数中是不同的
前端·javascript·vue.js