这篇文章主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-draggable 的github传送门 :
https://github.com/SortableJS/Vue
本文来源gaodai.ma#com搞##代!^码@网3
.Draggable
一. 下载依赖包：npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖，注册组件：
import draggable from "vuedraggable"; export default { components: { draggable, }
三. 在template 中建立表格，分别写出thead 部分不变， 此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。
（渲染方法：）
<table class="dataTabble"> <thead> <tr> <th width="110">栏目名称</th><th width="200">发布时间</th><th width="160">公告数量</th><th width="160">操作</th></tr></thead> <tr> <td>{{item.name}}</td><td>{{item.time}}</td><td>{{item.num}}</td><td> <div class="tabopa"> 添加删除</div></td></tr></table><div class="zhu mt40">提示：拖动可对栏目进行排序</div>
此处data部分，通过{ { } } 获取data中数据，实际中通过请求获取
data() { return { tablelist: [ { id: 1, name: "活动消息1", time: "2018-08-25 14：54", num: "1000" }, { id: 2, name: "公司消息2", time: "2018-08-25 14：54", num: "200" }, { id: 3, name: "个人消息3", time: "2018-08-25 14：54", num: "30000" }, { id: 4, name: "客户消息4", time: "2018-08-25 14：54", num: "40" } ], }; },
四.相关方法
获取拖动中和拖动结束时的id
methods: { //拖动中与拖动结束 getdata(evt) { console.log(evt.draggedContext.element.id); }, datadragEnd(evt) { console.log("拖动前的索引 :" + evt.oldIndex); console.log("拖动后的索引 :" + evt.newIndex); console.log(this.tags); },
五.贴出全部代码
<div> <!--main--><table class="dataTabble"> <thead> <tr> <th width="110">栏目名称</th><th width="200">发布时间</th><th width="160">公告数量</th><th width="160">操作</th></tr></thead> <tr> <td>{{item.name}}</td><td>{{item.time}}</td><td>{{item.num}}</td><td> <div class="tabopa"> 添加删除</div></td></tr></table><div class="zhu mt40">提示：拖动可对栏目进行排序</div><!--main end--></div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
转载请注明原文链接：利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
