🔥 引言
在当今高度互动的Web应用环境中，用户界面的友好性和操作便捷性是决定产品成败的关键因素之一。Vue 3与Element Plus的结合，为开发者提供了一套高效且灵活的工具集，用于构建丰富的用户界面。其中，实现表格数据的拖拽排序功能，极大地提升了用户在处理列表型数据时的操作效率与直观感受。
本文将深入浅出地介绍如何在Vue 3的Element Plus框架下的el-table组件中集成Sortable.js，解锁平滑流畅的拖拽排序体验，让数据管理变得简单直观。
🚀 实现效果
📌 Sortable.js介绍
Sortable.js 是一款强大且轻量级的JavaScript库，专为实现元素的拖放排序功能而设计。它不依赖于 jQuery 或其他大型框架，能够独立工作，并且兼容包括 IE9 及以上版本在内的现代浏览器以及移动触摸设备。这使得Sortable.js成为跨平台Web开发项目的理想选择。
该库的特点包括：
- 广泛兼容性：支持多种浏览器环境，包括旧版IE浏览器（从IE9开始），以及各种现代浏览器，确保了良好的跨浏览器体验。
- 框架无关：
Sortable.js可以直接集成到Meteor、AngularJS、React、Vue、Knockout等多种前端框架中，无需担心框架限制。 - 触摸友好：针对移动端优化，能够在触摸屏设备上提供流畅的拖拽体验。
- 高度可定制：提供丰富的配置选项，如动画效果、拖拽预览样式（
ghostClass）、分组排序（group）等功能，允许开发者根据需求调整行为和外观。 - 易于集成：只需引入
Sortable.js文件，然后通过简单的JavaScript代码即可启用拖放排序功能，适用于列表、表格等常见布局元素。 - 模块化设计：
Sortable.js采用模块化结构，开发者可以根据实际需求选择导入核心库或是包含所有插件的完整版本，有助于控制最终打包文件的大小。
通过Sortable.js，开发者可以快速实现如列表项的拖动重排、不同容器间的元素转移等常见交互需求，大大提升了Web应用的交互性和用户体验。
📌 下载依赖
npm i sortablejs @types/sortablejs
📌 添加类名
//首先给el-table 加上class="elTable" <el-table class="elTable" :data="tableData">
📌 导入sortablejs
//导入sortablejs import Sortable from 'sortablejs';
📌 初始化拖拽实例
const initSort = () => { const table = document.querySelector(".elTable .el-table__body-wrapper tbody"); Sortable.create(table, { group: 'shared', animation: 150, ghostClass: 'sortable-ghost', //拖拽样式 easing: 'cubic-bezier(1, 0, 0, 1)', onStart: (item: any) => { console.log(item); }, // 结束拖动事件 onEnd: (item: any) => { console.log(item); setNodeSort(item.oldIndex, item.newIndex) }, }) }
📌 拖拽完成后的处理
const setNodeSort = (oldIndex: any, newIndex: any) => { // 使用arr复制一份表格数组数据 const arr = xxx; console.log(arr); const currentRow = arr.splice(oldIndex, 1)[0] arr.splice(newIndex, 0, currentRow ) // 原数组置空 xxx = []; nextTick(async () => { xxx = arr; // 数据处理 // ... // 提交后后台数据进行排序 // ... }); }
📚 总结
通过对Vue 3与Element Plus框架下el-table组件的深度定制，我们成功实现了拖拽排序功能，不仅丰富了用户交互方式，也显著提高了数据操作的灵活性与效率。
借助Sortable.js的强大力量，我们见证了从安装依赖、添加必要的类名、初始化拖拽实例，到处理拖拽完成逻辑的全过程，每一步都精心设计，确保了功能的稳定与用户体验的优化。
此番实践不仅加深了对Vue生态及第三方库整合的理解，也为开发高互动性Web应用提供了宝贵的实战经验。未来，在追求极致用户体验的道路上，持续探索和优化这样的交互细节，将是我们不断提升产品竞争力的重要途径
