在Vue中结合Element UI的el-table和row-drag-js实现行拖拽排序的示例代码如下：
首先，安装row-drag-js插件：
npm install row-drag-js --save
然后，在Vue组件中使用：
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%"
row-key="id"
@row-dragend="onRowDragEnd"
>
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
></el-table-column>
</el-table>
</div>
</template>
<script>
import Sortable from 'row-drag-js';
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Jane', age: 25 },
{ id: 3, name: 'Bob', age: 22 },
// ...更多数据
],
tableColumns: [
{ label: 'Name', prop: 'name' },
{ label: 'Age', prop: 'age' },
],
};
},
mounted() {
this.rowDrop();
},
methods: {
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody');
const that = this;
Sortable.create(tbody, {
animation: 180,
delay: 0,
onEnd({ newIndex, oldIndex }) {
const targetRow = that.tableData.splice(oldIndex, 1)[0];
that.tableData.splice(newIndex, 0, targetRow);
},
});
},
onRowDragEnd(event) {
// 可以在这里处理拖拽后的数据更新逻辑
console.log('拖拽结束', event);
},
},
};
</script>
在这个例子中，我们首先在data选项中定义了表格的数据和列属性。然后，在mounted钩子中调用了rowDrop方法来初始化行拖拽功能。rowDrop方法使用Sortable.create来创建排序实例，并绑定了拖拽结束的回调函数onEnd，它会在用户放开鼠标后更新表格数据的顺序。
请确保你的项目中已经正确安装了Element UI，并且正确引入了所需的CSS和JavaScript文件。