使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序

简介: 使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序

🔥 引言

在当今高度互动的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可以直接集成到MeteorAngularJSReactVueKnockout等多种前端框架中,无需担心框架限制。
  • 触摸友好:针对移动端优化,能够在触摸屏设备上提供流畅的拖拽体验。
  • 高度可定制:提供丰富的配置选项,如动画效果、拖拽预览样式(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 3Element Plus框架下el-table组件的深度定制,我们成功实现了拖拽排序功能,不仅丰富了用户交互方式,也显著提高了数据操作的灵活性与效率。

借助Sortable.js的强大力量,我们见证了从安装依赖添加必要的类名初始化拖拽实例,到处理拖拽完成逻辑的全过程,每一步都精心设计,确保了功能的稳定与用户体验的优化。

此番实践不仅加深了对Vue生态及第三方库整合的理解,也为开发高互动性Web应用提供了宝贵的实战经验。未来,在追求极致用户体验的道路上,持续探索和优化这样的交互细节,将是我们不断提升产品竞争力的重要途径

目录
相关文章
|
3天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
10天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
9天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
13天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
21 1
|
18天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
8天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
1月前
|
JavaScript
JS数组排序看懂这篇就够了
JS数组排序看懂这篇就够了
13 1
|
18天前
|
JavaScript
JS 【详解】双指针排序 -- 数组合并后递增排序
JS 【详解】双指针排序 -- 数组合并后递增排序
10 0
|
21天前
|
前端开发 JavaScript
前端 JS 经典:最近距离排序
前端 JS 经典:最近距离排序
9 0