vue的sortable
时间: 2023-08-28 08:21:15 浏览: 59
Vue的sortable是一个用于实现拖拽排序功能的插件,可以方便地实现对元素的拖拽排序。在引用的代码中,使用了sortablejs插件来实现拖拽排序的功能。在mounted钩子函数中,调用了test方法来初始化sortable插件。test方法中,通过new Sortable(el, options)来创建sortable实例,el参数指定了需要拖拽排序的元素,options参数中的onEnd属性定义了拖拽结束时的回调函数,该回调函数中可以获取到排序之后的数据,并更新Vue实例的value属性。这样,当拖拽结束后,value属性会更新为新的排序数据,从而实现了拖拽排序功能。
如果需要后端实现排序功能,可以将sortable设置为custom,如引用中所示。同时在Table组件上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向后端接口请求排序后的表格数据。在引用的代码中,sortChange方法用来处理排序变化的逻辑,根据column对象中的prop和order属性判断排序的字段名和排序顺序,然后调用getList方法向后端请求排序后的数据。
综上所述,Vue的sortable插件能够方便地实现对元素的拖拽排序功能,并且可以通过监听sort-change事件来实现与后端的交互,实现后端排序功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue使用sortable实现拖拽排序](https://blog.csdn.net/douyiqing/article/details/101205380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue之sortable实现排序功能](https://blog.csdn.net/nxw_tsp/article/details/86096914)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]