【VUE】ant design vue实现表格table上下拖拽排序

适合版本：ant design vue 1.7.8 

实现效果：

代码：

<template><div class="table-container"><a-table:columns="columns":dataSource="tableData":rowKey="record => record.id":rowClassName="getRowClassName"><template v-slot:action="text,record"><a-button type="primary" icon="drag" @mousedown="startDrag(record, $event)"></a-button></template></a-table></div>
</template><script>
import { Table, Button } from 'ant-design-vue';export default {components: {'a-table': Table,'a-button': Button},data() {return {tableData: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }],columns: [{ title: 'ID', dataIndex: 'id', key: 'id' },{ title: 'Name', dataIndex: 'name', key: 'name' },{title: 'Action',key: 'action',scopedSlots: { customRender: 'action' }}],draggingItem: null,draggingIndex: -1};},methods: {getRowClassName(record, index) {return index === this.draggingIndex ? 'dragging-row' : '';},startDrag(record, event) {this.draggingItem = record;this.draggingIndex = this.tableData.findIndex(item => item.id === record.id);document.addEventListener('mousemove', this.onDrag);document.addEventListener('mouseup', this.stopDrag);},onDrag(event) {const mouseY = event.clientY;const tableRows = document.querySelectorAll('.ant-table-row');let targetIndex = -1;tableRows.forEach((row, index) => {const rect = row.getBoundingClientRect();if (mouseY >= rect.top && mouseY <= rect.bottom) {targetIndex = index;}});if (targetIndex !== -1 && targetIndex !== this.draggingIndex) {const [draggedItem] = this.tableData.splice(this.draggingIndex, 1);this.tableData.splice(targetIndex, 0, draggedItem);this.draggingIndex = targetIndex;}},stopDrag() {document.removeEventListener('mousemove', this.onDrag);document.removeEventListener('mouseup', this.stopDrag);this.draggingItem = null;this.draggingIndex = -1;}}
};
</script><style>
.dragging-row {background-color: #f0f0f0;cursor: grabbing;
}
</style>