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

news2024/11/4 23:35:29

文章目录

- 实现效果
- Sortable.js介绍
- 下载依赖
- 添加类名
- 导入sortablejs
- 初始化拖拽实例
- 拖拽完成后的处理
- 总结

在开发过程中，我们经常需要处理表格数据，并为用户提供便捷的排序方式。特别是在需要管理长列表、分类数据或动态内容时，拖拽排序功能显得尤为重要。它允许用户通过简单的拖动操作来自定义数据的显示顺序，这不仅提高了操作效率，也增强了用户的参与感。

结合 Vue 3 和 Element Plus 框架，我们可以利用 Sortable.js 库轻松实现这一功能。本文将介绍如何在el-table组件中集成拖拽排序，使数据管理更加直观和高效。

实现效果

在这里插入图片描述

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;
		// 数据处理
    // ...
		// 提交后后台数据进行排序
    // ...
	});
}