vue3表格使用拖拽排序

在Vue 3中实现表格的拖拽排序功能，你可以使用第三方库如vuedraggable。以下是一个简单的例子：

1. 首先安装vuedraggable：

npm install vuedraggable

2. 在你的组件中使用它：

<template>
  <div>
    <draggable v-model="rows" @end="onDragEnd">
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id">
            <td>{{ row.value1 }}</td>
            <td>{{ row.value2 }}</td>
          </tr>
        </tbody>
      </table>
    </draggable>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  setup() {
    const rows = ref([
      { id: 1, value1: 'Row 1', value2: 'Data 1' },
      { id: 2, value1: 'Row 2', value2: 'Data 2' },
      // ... more rows
    ]);
 
    function onDragEnd(event) {
      // Handle the end of dragging event
      console.log('Dragged row: ', rows.value[event.oldIndex]);
    }
 
    return {
      rows,
      onDragEnd,
    };
  },
};
</script>

在这个例子中，draggable是一个包装好的组件，它允许你通过拖拽来重新排列表格行。v-model用于和行数组rows进行双向绑定，当行排序改变时，rows数组会自动更新。@end事件用于处理拖拽结束后的逻辑，例如更新数据库的顺序等。