vue3加ant deign vue实现拖动表格行

你可以使用Vue 3和Ant Design Vue来实现拖动表格行。下面是一个简单的示例：

1. 首先，确保你已经安装了Vue 3和Ant Design Vue。你可以使用以下命令来安装它们：

npm install vue@next ant-design-vue@next

2. 创建一个Vue组件，并引入Ant Design Vue的Table和Draggable组件：

<template>
  <a-table :columns="columns" :dataSource="dataSource">
    <template #body="{ row, index }">
      <draggable v-model="dataSource" :element="'tr'" :options="{ handle: 'td' }">
        <tr :key="index">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.address }}</td>
        </tr>
      </draggable>
    </template>
  </a-table>
</template>

<script>
import { Table, Draggable } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
    draggable: Draggable,
  },
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
      ],
      dataSource: [
        { key: 1, name: 'John', age: 28, address: 'New York' },
        { key: 2, name: 'Alice', age: 32, address: 'London' },
        { key: 3, name: 'Bob', age: 24, address: 'Paris' },
      ],
    };
  },
};
</script>

在上面的代码中，我们使用了`draggable`组件来包裹表格行，并设置了`handle`选项为`'td'`，以便只有表格行内的单元格可以用于拖动。

以上就是使用Vue 3和Ant Design Vue实现拖动表格行的简单示例。你可以根据自己的需求进行定制和扩展。