vue3 antd Table 实现点击某个单元格进行行拖拽

在 Vue3 中使用 Ant Design 的 Table 组件实现行拖拽功能，你可以借助第三方库如 `vuedraggable` 或者 Ant Design 自带的 `TableDragger` 组件。以下是简单的步骤：

首先，你需要安装依赖：

npm install vuedraggable @ant-design/icons

然后，在组件中引入所需模块，并设置数据结构支持拖拽：

<template>
  <div>
    <draggable :list="tableData" :options="{ group: 'table-row', draggable: 'drag-handle', onEnd: handleDrop }">
      <tr v-for="(item, index) in tableData" :key="index">
        <td class="drag-handle"><i class="anticon anticon-columns"></i></td>
        <!-- ...表头... -->
        <!-- 可编辑列 -->
        <td v-for="(column, columnIndex) in columns" :key="columnIndex">{{ item[column] }}</td>
      </tr>
    </draggable>
  </div>
</template>

<script>
import { Table, TableColumn, Draggable } from "ant-design-vue";
import Icons from "@ant-design/icons";

export default {
  components: {
    Table,
    TableColumn,
    Draggable,
    Icons,
  },
  data() {
    return {
      tableData: [
        // 表格初始数据...
      ],
      columns: [
        // 列定义...
      ],
    };
  },
  methods: {
    handleDrop({ event, dragEl, containerEl, droppedItem }) {
      const currentIndex = this.tableData.indexOf(droppedItem);
      const sourceIndex = this.tableData.indexOf(dragEl);

      if (currentIndex !== sourceIndex) {
        this.tableData.splice(sourceIndex, 1);
        this.tableData.splice(currentIndex, 0, draggedItem);
      }
    },
  },
};
</script>

在这个例子中，`vuedraggable` 属性用于启用拖拽功能，`handleDrop` 方法会在拖放操作结束时更新表格数据。`drag-handle` 属性指定了可以作为拖动元素的部分，这里是一个图标。