vue2+element 拖拽更改表格行和列顺序

Vue2 + Element UI 提供了一个强大的组件库，其中可以利用Element UI的`el-table`和`draggable`特性来实现实现表格行和列的拖拽功能。以下是一个简单的步骤概述：

1. 安装依赖：首先，需要安装 `element-ui` 和 `vue-draggable-resizable` 插件。你可以使用 npm 或 yarn 进行安装：

   npm install element-ui vue-draggable-resizable
   # 或者
   yarn add element-ui vue-draggable-resizable

2. 引入组件：在你的 Vue 组件中引入需要的组件和样式：

   <script src="node_modules/vue-draggable-resizable/dist/vue-draggable-resizable.min.js"></script>
   <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">

3. 使用`el-table`和`draggable-resizable`：创建一个可拖动的表格，并设置列的可拖动属性，例如：

   <el-table :data="tableData" :resizable-columns="true">
     <!-- ... -->
     <el-table-column
       type="index"
       label="序号"
       width="50"
       resizable
     ></el-table-column>
     <!-- 添加其他列并设置 draggable-resizable 属性 -->
   </el-table>

   data() {
     return {
       tableData: [
         // 表格数据
       ],
     };
   },
   methods: {
     onSortChange(column) {
       // 更新表格排序逻辑
     }
   }

4. 实现拖拽后的事件处理：当列被拖动到新的位置时，你需要监听`drag-end`事件，根据新位置更新表格数据：

   methods: {
     dragEnd(event) {
       const newOrder = event.newIndex;
       const oldIndex = event.oldIndex;
       this.tableData.forEach((item, index) => {
         if (item.col === event.model.id) {
           this.tableData[index].colOrder = newOrder; // 如果列ID匹配，更新列的新顺序
         }
       });
     },
   },

5. 考虑优化：为了更好地管理拖动状态，你可以将列的原始顺序存储在单独的数据结构中，或者在表格渲染时动态生成列。