vue实现表格拖拽并且可编辑

1使用vuedragger 

第一步安装 vuedragger

npm install vuedraggable --save   或者 npm i -S vuedraggable

第二步 组件中引用

import draggable from "vuedraggable"

第三步 初始化组件

components: {

draggable,

}

第四步 附上关键代码

{{index+1}}

{{item.wp_wordname}}

{{item.wp_pdfpage}}

预览

下载

删除

 

//拖动中与拖动结束

getdata(evt) {

// console.log(evt.draggedContext.element.id);

},

datadragEnd(evt) {

/* console.log("拖动前的索引 :" + evt.oldIndex);

console.log("拖动后的索引 :" + evt.newIndex);

console.log(this.tags); */

},

第五步 重启服务

附上完整代码