el-table 行拖拽排序

### 实现 Element UI `el-table` 行拖拽排序 为了在 Element UI 的 `el-table` 中实现行拖拽排序，可以采用一种较为简便的方法，即通过引入外部库来增强表格的功能。具体来说，可以通过使用 Sortable.js 库配合 Vue 来完成这一目标。 #### 导入必要的资源文件 首先，在项目中安装 Sortable.js 及其对应的 TypeScript 类型定义（如果适用）。这一步骤通常是在项目的依赖管理工具中执行命令来完成的[^2]。 ```bash npm install sortablejs --save ``` 对于支持 ES6 模块化的现代前端构建环境而言，推荐直接从 npm 安装上述包；而对于其他情况，则可以从 CDN 获取最新版本并将其链接到 HTML 文件头部。 #### 初始化拖拽功能 接着，在相应的 Vue 组件生命周期钩子函数内初始化拖拽逻辑。这里假设已经创建了一个名为 `initSortable` 的方法用于处理具体的拖拽行为设置： ```javascript // table-sort-demo.vue import { initSortable } from './sort.js' export default { name: "TableSortDemo", data() { return { list: [ /* 列表项 */ ] }; }, mounted() { initSortable.call(this, { list: this.list, selector: '.el-table__body-wrapper tbody' }); } } ``` 这段代码展示了如何调用 `initSortable` 方法，并传递了两个参数：一个是待操作的数据列表 `this.list`，另一个是指定要应用拖拽效果的选择器字符串 `.el-table__body-wrapper tbody`。注意这里的 `call(this)` 是为了让内部能够访问到当前 Vue 实例中的属性和方法。 #### 编写辅助函数 最后，编写实际负责监听拖拽事件并与之交互的 JavaScript 函数。这部分内容一般会放在单独的一个 JS 文件里，比如上面提到过的 `./sort.js`: ```javascript // sort.js import Sortable from 'sortablejs'; function initSortable(options) { const vm = options.vm; new Sortable(document.querySelector(options.selector), { animation: 150, onEnd({ newIndex, oldIndex }) { let targetRow = vm.list.splice(oldIndex, 1)[0]; vm.list.splice(newIndex, 0, targetRow); // 更新视图或其他业务逻辑... } }); } export { initSortable }; ``` 此段脚本利用了 Sortable.js 提供的能力，当用户结束一次有效的拖放动作时触发回调函数 `onEnd()`，进而调整数组顺序以反映新的排列状态。同时，也允许开发者在此基础上扩展更多个性化的交互体验或同步更新服务器端存储的状态变化等操作。