GitHub地址链接:https://github.com/SortableJS/Vue.Draggable
中文网址:https://www.itxst.com/vue-draggable/fiamvqam.html
注意:el-table 一定要指定 row-key!!!不然拖拽会出现问题。
install
yarn add vuedraggable
npm i -S vuedraggable
引入
import Sortable from "sortablejs";
<el-table class="draggable-table" :data="tableData" row-key="id" ></el-table>
// 表格行拖拽
rowDrag() {
const el = document.querySelectorAll(".draggable-table .el-table__body-wrapper > table > tbody")[0];
const vm = this;
Sortable.create(el, {
disabled: false, // 拖拽是否可用
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时
onEnd: function (e) { // 拖拽结束时触发
let arr = vm.tableData;
arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理,获取最新的表格数据
vm.$nextTick(function () {
vm.tableData = arr;
})
},
});
},
如果不想使用Element-ui,可以到中文文档去看看例子。
中文网址:https://www.itxst.com/vue-draggable/fiamvqam.html
中文文档的例子如下:
<template>
<div style="padding:10px">
<!--使用draggable组件-->
<div>点击第一列数字进行拖动,其他列拖拽无效</div>
<table class="itxst">
<draggable v-model="list" animation="500" force-fallback="true" handle=".move" @start="onStart" @end="onEnd" :move="checkMove">
<tr v-for="item in list" :key="item.id" >
<td style="width:50px" class="move">{{item.id}}</td>
<td style="width:250px">{{item.name}}</td>
</tr>
</draggable>
</table>
</div>
</template>
<style scoped>
/*定义要拖拽元素的样式*/
table.itxst {
color:#333333;
border: #ddd solid 1px;
border-collapse: collapse;
}
table.itxst th {
border: #ddd solid 1px;
padding: 8px;
background-color: #dedede;
}
table.itxst td {
border: #ddd solid 1px;
padding: 8px;
background-color: #ffffff;
}
table.itxst tr {
cursor: pointer;
}
table.itxst td.move:hover {
cursor: move;
}
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag:false,
//定义要被拖拽对象的数组
list:[
{id:1,name:'www.itxst.com'},
{id:2,name:'www.jd.com'},
{id:3,name:'www.ebay.com'},
]
};
},
methods: {
checkMove(evt) {
console.log(evt)
return true;
},
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
};
</script>