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

news2024/12/30 2:42:35

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

    • 1.第一步我们要安装sortablejs依赖
    • 2.在我们需要的组件中引入
    • 3.完整代码
    • 4.效果

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.效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/750949.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【力扣算法09】之 6. N 字形变换 python

文章目录 问题描述示例1示例2示例3提示 思路分析代码分析完整代码详细分析运行效果截图调用示例运行结果 完结 问题描述 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&…

组合(力扣)dfs + 回溯 + 剪枝 JAVA

给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 示例 2&#xff1a; 输入&#xff1a;n 1, …

设计模式之模板模式

1. 模板模式介绍 1、模板模式即模板方法模式自定义了一个操作中的算法骨架&#xff0c;而将步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构&#xff0c;可以自定义该算法的某些特定步骤&#xff1b; 2、父类中提取了公共的部分代码&#xff0c;便于代码复用&am…

rabbitmq延时队列自动解锁库存

使用了最终一致性来解决分布式事务 当order服务出现异常回滚&#xff0c;此时ware服务无法回滚&#xff0c;怎么办&#xff1f; 使用seata全局事务虽然能在order服务出现异常导致回滚时使其他服务的也能同时回滚&#xff0c;但在流量大的情况下是使用加锁的方式&#xff0c;效…

transformer 学习

原理学习: (3条消息) The Illustrated Transformer【译】_于建民的博客-CSDN博客 代码学习: https://github.com/jadore801120/attention-is-all-you-need-pytorch/tree/master/transformer mask学习: (3条消息) NLP 中的Mask全解_mask在自然语言处理代表什么_郝伟博士的…

HTTP原理解析-超详细

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于海外某世界知名高校就读计算机相关专业。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。…

linux 安装 milvus 和 Attu

效果图 准备 建议使用docker安装&#xff0c;比较简单易操作 查看自己是否安装docker-compose docker-compose --version 如果docker-compose 的版本低于2.0&#xff0c;会报错&#xff0c;报错内容如下&#xff1a; 所以在此之前需要把docker-compose升级到2.0版本 升级d…

Kafka 概述、Filebeat+Kafka+ELK

Kafka 概述、FilebeatKafkaELK 一、为什么需要消息队列&#xff08;MQ&#xff09;1、使用消息队列的好处2、消息队列的两种模式 二、Kafka 定义1、Kafka 简介2、Kafka 的特性3、Kafka 系统架构 三、部署 kafka 集群1.下载安装包2.安装 Kafka3.Kafka 命令行操作 四、Kafka 架构…

解决win11选择打开方式时卡死

解决win11选择打开方式时卡死 问题描述 右键想要打开的文件&#xff0c;选择打开方式&#xff0c;点击在电脑上选择应用&#xff0c;在地址栏输入地址&#xff0c;卡死 解决方法 在桌面底部点击右键&#xff0c;打开“任务管理器” 搜索“选取应用”进程 右键该进程&#…

Java postman+ajax

0目录 1.PostMan 2.实战&#xff08;引入阿贾克斯&#xff09; 1.PostMan 定义 Postman是一个接口测试工具 doPost 和doGet方法 配置xml 测试 PostMan测试 Get 请求 Post请求 测试 新建add.jsp 利用jsp实现post请求 Service方法实现doPost…

实时进度追踪与可视化:Gradio库中的Progress模块详解

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

【剑指offer】20. 链表中环的入口结点(java)

文章目录 链表中环的入口结点描述输入描述&#xff1a;返回值描述&#xff1a; 示例1示例2示例3思路完整代码 链表中环的入口结点 描述 给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。 数据范围&…

java学习路程之篇五、知识点、变量、标识符、数据类型、Scanner键盘录入

文章目录 1、变量2、标识符3、数据类型4、Scanner键盘录入 1、变量 2、标识符 3、数据类型 4、Scanner键盘录入

twaver——树中选择子网,拓扑中显示子网里面的拓扑

twaver.network.Network.setCurrentSubNetwork ( currentSubNetwork [animate] [finishFunction] ) 将当前子网设置为指定子网&#xff0c;并且可以设置是否有动画效果&#xff0c;而且能指定设置当前子网结束后执行的动作 Parameters: currentSubNetwork twaver.SubNetwork 子…

OSPF(链路状态路由协议)

目录 OSPF&#xff08;链路状态路由协议&#xff09; 动态路由评判标准&#xff1a; 1.选路佳 2.收敛快 3.资源占用&#xff08;越小越好&#xff09; 相同于不同 RIP 和OSPF相同点&#xff1a; RIP 和OSPF不同点&#xff1a; 结构部署&#xff1a;区域规划 OSPF区域划…

4G 网络跟 5G 的区别

4G网络和5G网络是两种不同的移动通信技术&#xff0c;它们在数据传输速度、延迟、连接密度和网络容量等方面存在一些区别。以下是它们之间的主要区别&#xff1a; 1. 速度&#xff1a;5G网络的速度比4G网络更快。5G网络具备更广的频段和更高的频率&#xff0c;能够提供更大的带…

上位机一般的开发工具?

上位机开发工具是用于开发和构建上位机应用程序的软件工具。它们提供了一系列功能和资源&#xff0c;帮助开发人员设计、编写和调试上位机应用程序。以下是一些常见的上位机开发工具&#xff1a;Visual Studio&#xff1a;作为一种集成开发环境&#xff08;IDE&#xff09;&…

shardingsphere mybatisplus properties和yml配置实现

shardingsphere mybatisplus properties和yml配置实现 目录结构 model package com.oujiong.entity; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.util.Date;/*** user表*/ TableName("user") Data public class Use…

CSS整段文字缩进(一段多行文字中首列位置相对应)

<style>p {text-align: justify;padding-left: 2em;} </style>

webpack5性能优化

webpack构建速度 一、优化babel-loader 注意&#xff1a;开启缓存,配置后打包是就能缓存babel webpack.common.js文件命中缓存cacheDirectory {test: /\.js$/,use: [babel-loader?cacheDirectory],include: srcPath,exclude: /node_modules/ }, 测试&#xff1a; 打包后的…