vue3+elment plus + sortable 实现table表格可拖拽排序

在Vue3和Element Plus框架下，结合Sortable库可以轻松实现表格的拖拽排序功能。首先，你需要安装相关的依赖，包括`element-plus`、`vue-sortablejs`等。以下是一个简单的步骤说明：

1. **安装依赖**:
- 使用npm或yarn安装Element Plus：`npm install element-plus`
- 安装Sortable库：`npm install sortablejs`

2. **引入组件和样式**:
在项目文件中导入Element Plus的Table组件以及Sortable库：

   import { Table } from 'element-plus';
   import Sortable from 'sortablejs';

3. **创建数据源**:
初始化一个包含可排序数组的数据结构，比如：

   const dataSource = [
     {
       id: 1,
       name: 'Item 1',
       // 添加其他属性...
     },
     ... // 其他数据项
   ];

4. **绑定Sortable到表头**:
在Table的列定义中，将Sortable应用到需要排序的那一列：

   <template>
     <Table :data="dataSource" ref="tableRef">
       <TableHeaderRow :columns="columns">
         <!-- 使用sortablejs处理的列 -->
         <th v-for="(column, index) in columns" :key="index" @sort-change="handleSortChange(column)">
           {{ column.label }}
           <span slot="scope" class="cursor-pointer">{{ sortOrders[column.prop] }}</span>
         </th>
       </TableHeaderRow>
       <!-- ...其他Table内容... -->
     </Table>
   </template>

   <script>
   export default {
     data() {
       return {
         columns: [
           { prop: 'name', label: 'Name', sortable: true },
           {/* ...其他列... */}
         ],
         sortOrders: {}, // 存储排序信息
       };
     },
     methods: {
       handleSortChange(column) {
         this.sortOrders[column.prop] = column.order;
         // 更新排序后的数据源，这里通常会涉及数据库操作或本地状态更新
         this.dataSource = this.dataSource.sort((a, b) => {
           if (column.order === 'asc') {
             return a[column.prop].localeCompare(b[column.prop]);
           } else {
             return b[column.prop].localeCompare(a[column.prop]);
           }
         });
       },
     },
   };
   </script>

5. **初始化Sortable**:
在`mounted()`钩子中，初始化Sortable实例并设置回调函数：

   mounted() {
     const tableHeader = this.$refs.tableRef.head;
     if (tableHeader) {
       Sortable(tableHeader.querySelector('th.cursor-pointer'), {
         group: '__TABLE_SORT__', // 设置组名防止冲突
         onEnd: ({ newIndex }) => {
           // 需要根据newIndex更新数据库或其他地方的排序顺序
           this.handleSortChange({ prop: this.columns[newIndex].prop, order: newIndex > this.columns.length / 2 ? 'desc' : 'asc' });
         },
       });
     }
   },

6. **注意事项**:
- 确保在实际项目中处理好状态管理和数据同步，例如Vuex或自定义事件系统。
- 根据需求调整排序图标或显示方式。