elementplus 表头拖拽 vue3

### 实现 Vue3 和 Element Plus 的表格表头拖拽功能

为了实现在 Vue3 中使用 Element Plus 组件库创建具有表头拖拽功能的表格，可以采用 `Sortable.js` 库来增强原生 HTML5 Drag and Drop API 功能。下面介绍一种可行的方法。

#### 安装依赖包
首先确保安装了必要的 npm 包，包括 `sortablejs`：

npm install sortablejs@latest --save

#### 创建自定义指令用于处理表头拖拽逻辑
通过编写一个简单的 Vue 自定义指令来管理表头之间的交互行为。此部分代码负责初始化 Sortable 并监听事件以便更新状态。

import Sortable from 'sortablejs';

// 注册全局指令 v-sortable-header
app.directive('sortableHeader', {
  mounted(el, binding) {
    new Sortable(el, {
      handle: '.drag-handle',
      animation: 150,
      ghostClass: "ghost",
      onEnd({ newIndex, oldIndex }) {
        let targetColumn = binding.value.columns[oldIndex];
        binding.value.move(targetColumn, newIndex);
      }
    });
  },
});

这里假设存在名为 `.drag-handle` 的 CSS 类名作为抓手图标显示给用户提示哪些列是可以移动的；同时当发生位置改变时触发回调函数通知父组件调整内部数据结构。

#### 修改模板以适应新特性
接下来修改 `<template>` 部分，在每列头部添加特定类名供上述 JavaScript 使用，并绑定相应属性传递上下文信息。

<el-table :data="tableData">
  <el-table-column
    v-for="(column, index) in columns"
    :key="index"
    :label="column.label"
    :prop="column.prop"
  >
    <!-- 添加 drag handle -->
    <span slot="header" class="drag-handle">:::</span>
  </el-table-column>
</el-table>

<!-- 将整个 thead 设置为可排序区域 -->
<div v-sortableHeader="{columns}">
  ...
</div>

注意这里的 `slot="header"` 插槽允许我们在默认渲染的内容之前插入额外标记——即那个代表拖动手柄的小图标。

#### 更新脚本中的响应式变量
最后一步是在 script 块里声明两个新的 reactive 属性：一个是用来保存当前展示字段配置的对象数组 `columns` ，另一个是用来记录原始顺序从而方便后续操作的方法 `move()` 。每当调用后者的时候都会同步更改视图层面上所呈现出来的排列方式[^1]。

setup() {
  const state = reactive({
    columns: [
      { label: '日期', prop: 'date' },
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address' }
    ],
    
    move(column, newIndex) {
      const currentIndex = this.columns.indexOf(column);
      if (currentIndex === newIndex || !~currentIndex) return;
      
      // 移动元素并保持其他不变
      this.$set(this.columns, newIndex, column);
      this.columns.splice(currentIndex, 1);
    }
  });

  return {...state};
}

这样就完成了基本版的支持表头重排特性的表格控件开发工作。当然实际应用中可能还需要考虑更多细节问题比如持久化设置、兼容性测试等等[^2]。