1.安装组件

npm install vuedraggable -S
2.引入组件

完整代码：helloWorld.vue

<template><div class="hello"><el-button @click="getData()">加载数据</el-button><table class="dataTabble" v-for="(item,id) in tableData" :key="id"><thead><tr><th width="80">序号</th><th width="200">地址</th></tr></thead><draggable v-model="item.orders" element="tbody" @update="datadragEnd"><tr v-for="(val,index) in item.orders" :key="index"><td>{{val.num}}</td><td>{{val.address}}</td></tr></draggable></table></div>
</template><script>import draggable from "vuedraggable";
export default {name: 'HelloWorld',components: {draggable,},data() {return {activeNames:[0],tableData:[],}},methods:{getData(){this.tableData = [{lable:'title1',orders:[{num:1,address:'上海市'},{num:2,address:'北京市'},{num:3,address:'深圳市'}]},{lable:'title2',orders:[{num:4,address:'河南省'},{num:5,address:'郑州市'},{num:6,address:'天安门'},{num:7,address:'南京市'}]}];},datadragEnd(e) {console.log("拖动前的索引 :" + e.oldIndex);console.log("拖动后的索引 :" + e.newIndex);},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>