首页 > 其他分享 >vue el-upload 上传拖拽排序

vue el-upload 上传拖拽排序

时间:2022-12-14 17:57:46浏览次数:50  
标签:el arr vue const oldIndex upload 拖拽

<template>
   <!-- 省略其他配置 -->
   <el-upload ref="upload" :file-list.sync="fileList"></el-upload>
 </template>
 <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>

标签:el,arr,vue,const,oldIndex,upload,拖拽
From: https://www.cnblogs.com/landuo629/p/16982821.html

相关文章

  • Java: 在Excel中插入和提取图片
    在编辑Excel文档时,为了丰富文档内容或者更好地说明文档内容,有时我们会在单元格中插入图片。此外,整理文档内容时,也可以通过编程的方式将图片从Excel中提取出来。接下来我就......
  • 给含有关键词的label着色
    给含有关键词的label着色FineFileType(){letarr=document.querySelectorAll('.el-checkbox__label');for(letindex=0;index<arr.length;index+......
  • vue3.0--setup()
    1.setup()定义:setup()是vue3新增加的组件。vue3采用了组合式 API ,为了使用组合式API,我们需要一个入口,在vue3组件中,称之为setup。(简单点来说,就是vue2里面的data,me......
  • el-tree 刷新后保持展开状态和选中节点不变
    需求el-tree刷新后默认折叠全部节点,默认选中第一个节点(以下简称默认设置)。现在需求是:新增或编辑节点数据,要求刷新后保持展开状态和选中节点不变。思路思路一:只在第......
  • vue2 自定义指令22 directives 简写 全局自定义
      <pv-color="'red'">测试</p>  <button@click="color='green'">改变color的颜色值</button> data(){  return{   color:'blue' ......
  • asp.net core 微服务网关示例 ocelot gateway Demo
    ocelotasp.netcore微服务gateway介绍https://ocelot.readthedocs.io/en/latest/introduction/gettingstarted.html 1.新建asp.netcorewebapi空项目AProject,nug......
  • vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名
    直接上代码 两个要点:1、v-for循环创建盒子2、使用函数给盒子id赋值  函数方法  ......
  • Vuex 详解
    state:import{Module,VuexModule}from'vuex-module-decorators'@ModuleexportdefaultclassVehicleextendsVuexModule{wheels=2}等同于下面的代......
  • sentinel 核心架构源码剖析
    常见限流算法精讲计数器法计数器法是限流算法里最简单也是最容易实现的一种算法。比如我们规定,对于A接口来说,我们1分钟的访问次数不能超过100个。那么我们可以这么做:在一......
  • Python用telnet设置,抓UDP抓采样点并显示
    ====main.bat====echooffrem"d:\Program\WiresharkPortable64\App\Wireshark\tshark.exe"--list-interfacesrem"d:\Program\WiresharkPortable64\App\Wireshark\tsha......