vue3 table表格拖拽排序

Vue3 中的表格拖拽排序可以通过使用 Vue3 的指令和事件处理程序来实现。以下是一个简单的示例：

1. 首先，我们需要为表格元素添加一个指令 v-draggable，该指令可以通过拖动表格行来排序。该指令可以使用 vue3-draggable 库来实现。

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody v-draggable="items" @end="onDragEnd">
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 然后，我们需要在组件中定义 items 数组和 onDragEnd 事件处理程序。items 数组包含表格中的所有行数据，onDragEnd 事件处理程序在拖动结束时更新 items 数组的顺序。

<script>
import { ref } from 'vue';
import draggable from 'vue3-draggable';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'John', age: 25, gender: 'Male' },
      { id: 2, name: 'Mary', age: 30, gender: 'Female' },
      { id: 3, name: 'Bob', age: 20, gender: 'Male' },
    ]);

    const onDragEnd = (event) => {
      items.value = event.list;
    };

    return {
      items,
      onDragEnd,
    };
  },
  directives: {
    draggable,
  },
};
</script>

这样，我们就可以实现一个简单的表格拖拽排序功能。当用户拖动表格行时，表格中的行顺序将随之改变。