vue3+element+sortablejs实现table表格行列动态拖拽

原创已于 2023-07-18 11:25:22 修改 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript #elementui

于 2023-07-13 17:21:13 首次发布

文章介绍了如何在Vue3项目中使用ElementUI和SortableJS库来实现表格行的动态拖拽排序功能。首先需要安装SortableJS依赖，然后在组件中导入并初始化SortableJS。在模板中定义两个表格，通过SortableJS的创建实例和配置项实现拖放行为。同时，文章还提到如何扩展功能，判断拖动的行是否能放置到新的位置，基于特定条件进行排序更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+element+sortablejs实现table动态拖拽

1.第一步我们要安装sortablejs依赖

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

npm install sortablejs --save

或者

pnpm install sortablejs --save

或者

yarn add sortablejs --save

2.在我们需要的组件中引入

import Sortable from 'sortablejs'

3.完整代码

<template>
	<div class="one dp-flex">
		<div style="flex: 1" class="ones">
			<el-table :data="tableData" class="tableOne">
				<el-table-column
					v-for="(column, index) in tableColumns"
					:key="index"
					:label="column.label"
					:prop="column.prop"
					:index="index"
					:row-index="null"
					:sortable="true"
					@sort-change="handleSortChange"
				></el-table-column>
			</el-table>
		</div>
		<div style="flex: 1; margin-left: 30px" class="twos">
			<el-table :data="tableData" class="tableTwo">
				<el-table-column
					v-for="(column, index) in tableColumns"
					:key="index"
					:label="column.label"
					:prop="column.prop"
					:index="index"
					:row-index="null"
					:sortable="true"
					@sort-change="handleSortChange"
				></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';

let tableData = ref([
	{
		id: 1,
		name: '1',
		age: 18,
	},
	{
		id: 2,
		name: '2',
		age: 11,
	},
	{
		id: 3,
		name: '3',
		age: 13,
	},
]);
let tableColumns = ref([
	{ label: 'id', prop: 'id' },
	{ label: 'name', prop: 'name' },
	{ label: 'age', prop: 'age' },
]);
onMounted(() => {
	// new Sortable(example1, {
	// 	animation: 150,
	// 	ghostClass: 'blue-background-class',
	// });
	// const table = document.querySelector('.el-table__body-wrapper');
	const table1 = document.querySelector(`.ones .${'tableOne'} .el-table__body-wrapper tbody`);
	const table2 = document.querySelector(`.twos .${'tableTwo'} .el-table__body-wrapper tbody`);

	Sortable.create(table1, {
		group: {
			name: 'shared',
			pull: 'clone',
			put: false, // 不允许拖拽进这个列表
		},
		animation: 150,
		sort: false, // 设为false，禁止sort
	});
	Sortable.create(table2, {
		group: 'shared',
		animation: 150,
		onEnd: handleDragEnds,
	});
});
function handleSortChange({ oldIndex, newIndex, index, rowIndex }) {
	console.log('排序');

	// 处理列拖拽排序
	if (rowIndex === null) {
		// 处理表头列拖拽排序
		// 更新tableColumns的顺序
	} else {
		// 处理表格行列拖拽排序
		// 更新tableData的顺序
	}
}
function handleDragEnd() {
	// 拖拽结束后的处理
	console.log('拖拽结束后的处理');
}
function handleDragEnds() {
	// 拖拽结束后的处理
	console.log('拖拽结束后的处理');
}
</script>

4.效果

在这里插入图片描述

5.扩展:判断要拖动的行能不能拖动并放置到新位置

	const table2 = document.querySelector(`.AA  .${'right'} .el-table__body-wrapper tbody`);
	Sortable.create(table2, {
		group: 'shared',
		animation: 150,
		sort: true,
		onEnd: function (evt: any) {
			//拖拽结束发生该事件
			const movedItem = zongitemright.value[evt.oldIndex]; //拖动行数据

			const prevItem = zongitemright.value[evt.newIndex - 1]; //目标行上一行
			const nextItem = zongitemright.value[evt.newIndex]; //目标行下一行
			// 判断条件满足不满足(上下的fdtlvalue判断)
			if ((!prevItem || prevItem.fdtlvalue <= movedItem.fdtlvalue) && (!nextItem || movedItem.fdtlvalue <= nextItem.fdtlvalue)) {
				const movedItems = zongitemright.value.splice(evt.oldIndex, 1)[0]; //先删除原位置的拖动行
				zongitemright.value.splice(evt.newIndex, 0, movedItems);
			}
			let newArray = zongitemright.value.slice(0);
			zongitemright.value = [];
			nextTick(() => {
				zongitemright.value = newArray;
			});
		},
	});