el-table 拖拽列来重新排序

`el-table` 是 Element UI 中的一个表格组件，它提供了丰富的功能和定制选项。其中，拖拽列头（Draggable Column Headers）允许用户通过鼠标拖动列头来改变列的顺序。这通常用于实现动态的表头排列，让用户能够自定义查看数据的方式。

实现步骤大致如下：

1. 首先，在 Vue 组件中引入 `element-ui` 的 `ElTable` 和 `ElDraggable` 组件：

   <template>
     <el-table :data="tableData" :columns="columns" @sort-method="customSortMethod">
       <!-- ... -->
     </el-table>
   </template>

   <script>
   import { ElTable, ElDraggable } from 'element-plus';
   export default {
     components: { ElTable, ElDraggable },
     // ...
   };
   </script>

2. 定义 `columns` 数组，包含每个列的标题和初始排序信息：

   data() {
     return {
       columns: [
         { prop: 'column1', label: '列1', draggable: true },
         { prop: 'column2', label: '列2', draggable: true },
         // ...
       ],
       tableData: [...],
     }
   }

3. 定义自定义的排序方法 `customSortMethod`，当列头被拖放时会被调用，处理排序规则并更新列顺序：

   methods: {
     customSortMethod(column1, column2) {
       this.columns = this.columns.sort((a, b) => {
         if (a.prop === column1.prop) {
           return -1; // 当前列降序
         }
         if (b.prop === column1.prop) {
           return 1; // 当前列升序
         }
         // 如果不是当前列，则默认按照原顺序
         return a.order - b.order;
       });
     },
   }