vue3 table 表格 拖拽 排序

Vue3提供了一种非常简单的方式来实现拖拽排序，可以使用`draggable`指令来完成。

首先，需要在Vue组件中引入`vue-draggable-next`库：

import { defineComponent } from 'vue';
import draggable from 'vuedraggable';

然后，在`template`标签中使用`draggable`指令，将数据数组绑定到`v-model`上，设置`element`属性为表格的`tbody`元素，同时设置`handle`属性为可拖拽的元素：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody v-draggable="dragOptions" v-model="data">
      <tr v-for="item in data" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td class="drag-handle">☰</td>
      </tr>
    </tbody>
  </table>
</template>

最后，在`script`标签中定义数据和`dragOptions`：

export default defineComponent({
  name: 'TableDemo',
  data() {
    return {
      data: [
        { id: 1, name: 'Alice', age: 20, gender: 'Female' },
        { id: 2, name: 'Bob', age: 25, gender: 'Male' },
        { id: 3, name: 'Charlie', age: 30, gender: 'Male' },
        { id: 4, name: 'David', age: 35, gender: 'Male' },
        { id: 5, name: 'Eva', age: 40, gender: 'Female' },
      ],
      dragOptions: {
        element: 'tbody',
        handle: '.drag-handle',
      },
    };
  },
  components: { draggable },
});

其中，`dragOptions`对象中的`element`属性指定了拖拽的元素是`tbody`，而`handle`属性指定了可拖拽的元素是`.drag-handle`。

这样，就实现了一个简单的拖拽排序的表格组件。