Vue-draggable 的github传送门 :
一. 下载依赖包:npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖,注册组件:
import draggable from "vuedraggable";
export default {
components: {
draggable,
}
三. 在template 中建立表格,分别写出thead 部分不变, 此处需要将draggable 渲染成tbody,不然draggable会被解析成div 影响样式。
(渲染方法:)
栏目名称发布时间公告数量操作
{{item.name}}{{item.time}}{{item.num}}添加
删除
此处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);
},
五.贴出全部代码
栏目名称发布时间公告数量操作
{{item.name}}{{item.time}}{{item.num}}添加
删除
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
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" }
],
};
},
methods: {
//拖动中与拖动结束
getdata(evt) {
console.log(evt.draggedContext.element.id);
},
datadragEnd(evt) {
console.log("拖动前的索引 :" + evt.oldIndex);
console.log("拖动后的索引 :" + evt.newIndex);
console.log(this.tags);
},
}
}