在vue3中实现列拖拽功能

在 Vue3 中实现列拖拽功能可以使用原生的拖拽事件来实现，具体步骤如下：

1. 在表格头部的每一列上绑定 `draggable="true"` 属性，使得每一列可以被拖拽。

2. 监听表格头部的每一列的 `dragstart` 事件，记录当前拖拽的列的索引。

3. 监听表格头部的每一列的 `dragover` 事件，并阻止默认行为，以允许放置。

4. 监听表格头部的每一列的 `drop` 事件，获取当前拖拽的列的索引，并交换其与目标列的位置。

以下是一个示例代码：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(item, index) in tableColumns" 
            :key="item.id"
            :draggable="true"
            @dragstart="dragStart(index)"
            @dragover.prevent
            @drop="dropHandler(index)">
          {{ item.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        { id: 1, title: '列1' },
        { id: 2, title: '列2' },
        { id: 3, title: '列3' },
      ],
      dragingColumnIndex: null,
    };
  },
  methods: {
    dragStart(index) {
      this.dragingColumnIndex = index;
    },
    dropHandler(index) {
      if (index !== this.dragingColumnIndex) {
        // 交换列顺序
        [this.tableColumns[index], this.tableColumns[this.dragingColumnIndex]] = [this.tableColumns[this.dragingColumnIndex], this.tableColumns[index]];
      }
    },
  },
};
</script>

在这个示例代码中，我们使用了 `dragingColumnIndex` 来记录当前拖拽的列的索引，然后在 `dropHandler` 中交换拖拽列和目标列的位置。注意，在 `dragover` 事件中使用 `prevent` 修饰符阻止默认行为，以允许 `drop` 事件触发。