antdesign vue2表格行拖拽

你好，针对你的问题，使用 antd 的 Table 组件进行行拖拽需要进行以下步骤：

1. 为 Table 组件添加 onRow 方法，用于设置行拖拽的事件处理函数。

2. 实现 onRow 方法中的 onDragStart、onDragEnter、onDragOver、onDrop 方法，分别用于处理拖拽开始、进入、悬停和释放的事件。

3. 在 onDrop 方法中获取拖拽源和目标行的索引，交换它们的位置，最后更新数据源。

下面是一个示例代码，供参考：

<template>
  <Table :dataSource="dataSource" :columns="columns" :onRow="handleRow">
    <template #name="{ record }">
      <td>{{ record.name }}</td>
      <td>{{ record.age }}</td>
      <td>{{ record.address }}</td>
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
        { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
        { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
      ],
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
      ],
    };
  },
  methods: {
    handleRow(record, index) {
      return {
        onDragStart: (event) => {
          event.dataTransfer.setData('text/plain', `${index}`);
        },
        onDragEnter: (event) => {
          event.preventDefault();
        },
        onDragOver: (event) => {
          event.preventDefault();
        },
        onDrop: (event, targetRecord, targetIndex) => {
          event.preventDefault();
          const sourceIndex = parseInt(event.dataTransfer.getData('text/plain'));
          const sourceRecord = this.dataSource[sourceIndex];
          this.dataSource.splice(sourceIndex, 1, targetRecord);
          this.dataSource.splice(targetIndex, 1, sourceRecord);
        },
      };
    },
  },
};
</script>