vue3 表格拖拽排序

在 Vue3 中实现表格拖拽排序可以使用以下步骤：

1. 在表格中定义一个可拖拽的列头，例如使用`<th>`元素，并添加`draggable`属性以启用拖拽功能。
2. 监听`dragstart`事件并将拖拽的列的索引存储在数据中。
3. 监听`dragover`事件，并阻止默认行为以允许放置目标。
4. 监听`drop`事件，并获取当前的目标列的索引，然后通过交换数据中的列来实现拖拽排序。
5. 更新表格的渲染。

以下是一个示例代码：

<template>
  <table>
    <thead>
      <tr>
        <th
          v-for="(column, index) in columns"
          :key="index"
          :draggable="true"
          @dragstart="onDragStart(index)"
          @dragover.prevent
          @drop="onDrop(index)"
        >
          {{ column }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, index) in row" :key="index">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const columns = ref(['Name', 'Age', 'Gender']);
    const data = ref([
      { Name: 'Alice', Age: 25, Gender: 'Female' },
      { Name: 'Bob', Age: 30, Gender: 'Male' },
      { Name: 'Charlie', Age: 20, Gender: 'Male' },
    ]);

    let dragIndex = null;

    const onDragStart = (index) => {
      dragIndex = index;
    };

    const onDrop = (index) => {
      const temp = columns.value[dragIndex];
      columns.value.splice(dragIndex, 1);
      columns.value.splice(index, 0, temp);

      data.value.forEach((row) => {
        const temp = row[dragIndex];
        row.splice(dragIndex, 1);
        row.splice(index, 0, temp);
      });

      dragIndex = null;
    };

    return {
      columns,
      data,
      onDragStart,
      onDrop,
    };
  },
};
</script>

在这个示例中，我们将表格的列头设置为可拖拽，并使用`dragstart`事件将拖拽的列的索引存储在`dragIndex`变量中。在`drop`事件中，我们获取当前目标列的索引，并使用数据中的列进行交换，然后更新表格的渲染。