vue + element ui 折叠面板实现拖拽顺序

---

前言

最近接到一个需求，使用element ui折叠面板，可以通过拖拽对其实现排序，最开始没有头绪之前也没有接触过这类型的功能，所以直接说了NO

但是这两天得空，就研究了一下这个，在网上看了一些例子，然后发现是可以实现的（这里为我之前直接说NO的时候说一声对八起！！！）

配合vuedraggable插件实现

---

一、vuedraggable是什么？

vuedraggable是一个可以实现拖拽功能的插件

插件地址：https://www.npmjs.com/package/vuedraggable

文档介绍：https://sortablejs.github.io/Vue.Draggable/#/nested-with-vmodel

二、使用步骤

1.先下载插件

npm i vuedraggable

2.在需要使用的页面引入插件

import draggable from 'vuedraggable'

3.以组件的形式注册一下

components: { draggable },

4.使用

      <draggable @update="sort" class="draggable" v-model="baseData" tag="el-collapse">
        <div class="content" v-for="(item, index) in baseData" :key="index">
          <el-collapse v-model="activeName" accordion>
          <el-collapse-item :name="index">
  
          </el-collapse-item>
          </el-collapse>
        </div>
      </draggable>

js代码

   async sort(e) {
      console.log(e,'排序')
    },

我这里使用的是update方法，它还有其他的一些应用方法

---

总结

大致的实现拖拽功能的事件就是这样啦~
这里面有一个需要注意的地方，tag="el-collapse"这个地方刚开始是使用的element，后来发现控制台一直报错，上网查了一下方法说是element起用了，改成了用tag
也有可能是版本的问题，如果在使用中没有出现这个问题就可以忽略啦~~~

参考文章：https://blog.csdn.net/m0_59462557/article/details/123519139