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

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

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

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

javascript 复制代码
npm install sortablejs --save

或者

javascript 复制代码
pnpm install sortablejs --save

或者

javascript 复制代码
yarn add sortablejs --save

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

javascript 复制代码
import Sortable from 'sortablejs'

3.完整代码

javascript 复制代码
<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.扩展:判断要拖动的行能不能拖动并放置到新位置

javascript 复制代码
	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;
			});
		},
	});
相关推荐
芭拉拉小魔仙13 分钟前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump34 分钟前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD42 分钟前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~1 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
Jedi Hongbin1 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马2 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
liu****3 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San303 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶4 小时前
并行SSR,SSR并行加载
前端·javascript·架构
用户785127814704 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js