拖拽排序 表格列调整 基于elementui实现表格列的拖拽排序功能

🚀 Element UI 表格列拖拽排序实现指南（2025年8月更新）

📌 核心实现方案

Element UI 本身未直接提供表格列拖拽排序功能，但可通过第三方库实现：

SortableJS + Element UI 方案

• 步骤：
  1. 安装依赖：

     npm install sortablejs --save

  2. 引入并初始化：

     import Sortable from 'sortablejs';
     export default {
       mounted() {
         // 列拖拽逻辑
         const headerTr = document.querySelector('.el-table__header-wrapper tr');
         Sortable.create(headerTr, {
           animation: 150, // 动画效果
           onEnd: (evt) => {
             const movedCol = this.columns.splice(evt.oldIndex, 1)[0];
             this.columns.splice(evt.newIndex, 0, movedCol); // 更新列顺序
           }
         });
       }
     }

  3. 表格配置：

     <el-table :data="tableData" row-key="id">
       <el-table-column 
         v-for="(col, index) in columns" 
         :key="index" 
         :prop="col.prop" 
         :label="col.label" 
       />
     </el-table>

vue-draggable 方案

• 安装依赖：

  

  npm install vuedraggable sortablejs

• 使用示例：

  <template>
    <draggable v-model="columns" @end="onDragEnd">
      <el-table-column 
        v-for="col in columns" 
        :key="col.prop" 
        :prop="col.prop" 
        :label="col.label" 
      />
    </draggable>
  </template>
  <script>
  import draggable from 'vuedraggable';
  export default {
    components: { draggable },
    methods: {
      onDragEnd(evt) {
        // 拖拽结束后的逻辑（如保存顺序）
      }
    }
  }
  </script>

💡 关键注意事项

• 唯一标识：表格必须设置 row-key（如唯一ID），避免拖拽后数据错乱。
• 性能优化：数据量较大时，建议启用虚拟滚动或分页。
• 兼容性：确认 Element UI 版本与 SortableJS/vue-draggable 的兼容性（2025年推荐使用最新版）。

🎨 趣味增强技巧

• 自定义拖拽手柄：

  .handle {
    cursor: move;
    background: url('drag-icon.svg') center no-repeat;
  }

• 动画效果：

  Sortable.create(headerTr, {
    animation: 150, // 添加平滑动画
    ghostClass: 'sortable-ghost' // 拖拽时的占位样式
  });

📚 参考来源

1. CSDN博客：Vue Elementui表格行列实现拖拽排序（2022年）
2. 简书：Element之Table 表格（2025年更新）
3. 掘金：Vue进阶(幺零五):elementUI 实现表格行列拖拽（2023年）

通过以上方案,您可快速实现 Element UI 表格列的拖拽排序功能，并保持代码的简洁与可维护性！🎉