介绍 Vue的优点 import draggable 得到“vuedraggable";
export default {
,组件:{
拖拽,
以前,} & lt; table 类=癲ataTabble"比;
,& lt; thead>
,& lt; tr>
& lt;才能th 宽度=?10“祝辞栏目名称& lt;/th>
& lt;才能th 宽度=?00“在发布时间& lt;/th>
& lt;才能th 宽度=?60“在公告数量& lt;/th>
& lt;才能th 宽度=?60“祝辞操作& lt;/th>
,& lt;/tr>
,& lt;/thead>
,& lt; draggable v模型=皌ablelist",元素=皌body",:移动=癵etdata", @update=癲atadragEnd"比;
,& lt; tr v=?项目,id),拷贝tablelist",:关键=癷d"比;
& lt;才能td> {{item.name}} & lt;/td>
& lt;才能td> {{item.time}} & lt;/td>
& lt;才能td> {{item.num}} & lt;/td>
& lt;才能td>
& lt;才能div 类=皌abopa"比;
,,& lt; a @click=癲ialogFormVisible =, true",在添加& lt;/a>
,,& lt; a @click=皁pen2"在删除& lt;/a>
& lt;才能/div>
& lt;才能/td>
,& lt;/tr>
,& lt;/draggable>
& lt;/table>
& lt; div 类=皕hu mt40"在提示:拖动可对栏目进行排序& lt;/div> 数据(),{
,return {
,tablelist: [
{才能,id: 1,名字:,“活动消息1“,,,时间:,“2018 - 08 - 25,14:54",, num:,“1000“,},
,,{,,2,,名字:,“公司消息2“,,时间:,“2018 - 08 - 25,14:54",, num:,“200“,},
,,{,,3,,名字:,“个人消息3“,,时间:,“2018 - 08 - 25,14:54",, num:,“30000“,},
{才能,id: 4,,名字:,“客户消息4“,,时间:,“2018 - 08 - 25,14:54",, num:,“40“,}
,),
,};
}, 方法:,{
,//拖动中与拖动结束
,getdata (evt) {
console.log才能(evt.draggedContext.element.id);
},
,datadragEnd (evt), {
console.log才能(“拖动前的索引,:“,+,evt.oldIndex);
console.log才能(“拖动后的索引,:“,+,evt.newIndex);
console.log才能(this.tags);
}, & lt; template>
,& lt; div>
,& lt; !——主要在
,,& lt; table 类=癲ataTabble"比;
,,,& lt; thead>
,,,& lt; tr>
,,,,& lt; th 宽度=?10“祝辞栏目名称& lt;/th>
,,,,& lt; th 宽度=?00“在发布时间& lt;/th>
,,,,& lt; th 宽度=?60“在公告数量& lt;/th>
,,,,& lt; th 宽度=?60“祝辞操作& lt;/th>
,,,& lt;/tr>
,,,& lt;/thead>
,,,& lt; draggable v模型=皌ablelist",元素=皌body",:移动=癵etdata", @update=癲atadragEnd"比;
,,,& lt; tr v=?项目,id),拷贝tablelist",:关键=癷d"比;
,,,,& lt; td> {{item.name}} & lt;/td>
,,,,& lt; td> {{item.time}} & lt;/td>
,,,,& lt; td> {{item.num}} & lt;/td>
,,,,& lt; td>
,,,,& lt; div 类=皌abopa"比;
,,,,,& lt; a @click=癲ialogFormVisible =, true",在添加& lt;/a>
,,,,,& lt; a @click=皁pen2"在删除& lt;/a>
,,,,& lt;/div>
,,,,& lt;/td>
,,,& lt;/tr>
,,,& lt;/draggable>
,,& lt;/table>
,,& lt; div 类=皕hu mt40"在提示:拖动可对栏目进行排序& lt;/div>
,& lt; !——main 结束——比;
,& lt;/div>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关如何利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
Vue-draggable的github传送门:https://github.com/SortableJS/Vue.Draggable
一。下载依赖包:<代码> npm安装vuedraggable -S
二。在需要使用的当前界面引入依赖,注册组件:
三。在模板中建立表格,分别写出thead部分不变,此处需要将可拖动的渲染成身体,不拖然会被解析成div影响样式。
(渲染方法:& lt;可拖动的v模型=皌ablelist"元素=皌body"祝辞)
此处数据部分,通过{{,,}}获取数据中数据,实际中通过请求获取
四。相关方法
获取拖动中和拖动结束时的id
,五。贴出全部代码
