vue3 table拖拽排序

Vue3 Table拖拽排序可以通过以下步骤实现：

1. 安装`vuedraggable`插件：`npm install vuedraggable`

2. 在Vue组件中引入`vuedraggable`插件：

<template>
  <div>
    <draggable v-model="tableData" :options="{handle:'.drag-handle'}">
      <table>
        <thead>
          <tr>
            <th class="drag-handle"></th>
            <th>名称</th>
            <th>日期</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="drag-handle"></td>
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.status }}</td>
          </tr>
        </tbody>
      </table>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      tableData: [
        { name: '任务1', date: '2021-01-01', status: '进行中' },
        { name: '任务2', date: '2021-01-02', status: '已完成' },
        { name: '任务3', date: '2021-01-03', status: '已取消' },
        { name: '任务4', date: '2021-01-04', status: '进行中' },
      ],
    };
  },
};
</script>

3. 给表头和表格行添加可拖拽的手柄，使其可以被拖拽。

4. 配置`vuedraggable`插件的`options`属性，设置拖拽手柄的类名为`.drag-handle`，以确保只有手柄才能被拖拽。

5. 使用`v-model`绑定`tableData`，使其能够响应拖拽排序。

6. 在拖拽完成后，可以通过监听`onEnd`事件来获取排序后的数据：

<draggable
  v-model="tableData"
  :options="{handle:'.drag-handle'}"
  @end="onEnd"
>
  ...
</draggable>

methods: {
  onEnd(event) {
    console.log(this.tableData); // 输出排序后的数据
  },
},