前言
最近接到一个需求,使用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