vue3+el-plus对eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽):

先看看是不是你需要的:

表格行和列拖拽

如有对表格拖拽进行限制某列或某行不进行拖拽的需求,请点击:

vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽-CSDN博客

如果你已实现拖拽需求,但拖拽后发现表头并未改变的话,请点击:

解决el-table表格拖拽后,只改变了数据,表头没变的问题-CSDN博客

sortablejs官网:
Sortable.js中文网
使用sortablejs插件对表格进行拖拽操作:
npm install sortablejs --save
安装好插件后,对拖拽操作进行分析:

对于列拖拽:点击某列的表头前后挪移时,松开鼠标左键后,挪移的列就应该在哪列显示。

行拖拽:和列拖拽一样。

<template><div><el-table:data="tableData"borderscrollbar-always-onref="tableHeader"row-key="id"><template v-for="item in setColumns" :key="item.label"><!-- 操作列 --><el-table-columnv-if="item.prop === 'oprate'"fixed="right":prop="item.prop":label="item.label"><template #header><div class="search-title"><div :class="checked ? 'search-titleName' : ''">操作</div><el-icon class="search-icon" @click="search"><Search color="#409EFF" /></el-icon></div></template></el-table-column><!-- 序号列 --><el-table-columnv-else-if="item.prop === 'index'":type="item.type":label="item.label":width="item.width || 100"/><!-- 数据列 --><el-table-columnv-else:prop="item.prop":label="item.label":width="item.width || 100"/></template></el-table></div>
</template>
​
<script setup lang='js'>import { ref, watch, onMounted } from 'vue'import Sortable from 'sortablejs';
​let setColumns = ref([{prop: 'index',label: '序号',type: 'index'},{prop: 'name',label: '姓名'},{prop: 'address',label: '地址'},{prop: '11',label: '1'},{prop: '22',label: '2'},{prop: '33',label: '3'},{prop: '44',label: '4'},{prop: '55',label: '5'},{prop: '66',label: '6'},{prop: 'oprate',lable: ''}])let tableData = ref([{name: 'Tom1',address: '上海',11: 11,22: 21,33: 31,44: 41,55: 51,66: 61,id: 1},{name: 'Tom2',address: '北京',11: 12,22: 22,33: 32,44: 42,55: 52,66: 62,id: 2},{name: 'Tom3',address: '广州',11: 13,22: 23,33: 33,44: 43,55: 53,66: 63,id: 3},{name: 'Tom4',address: '深圳',11: 14,22: 24,33: 34,44: 44,55: 54,66: 64,id: 4}])let checked = ref(false)let sortable;const tableHeader = ref(null);
​onMounted(() => {columnDrag(); // 初始化列拖拽事件rowDrag() // 初始化行拖拽事件})
​const columnDrag = () => {let el = tableHeader.value.$el.querySelector('.el-table__header-wrapper tr')Sortable.create(el, {animation: 180,delay: 0,onEnd(evt) {const oldItem = setColumns.value[evt.oldIndex]setColumns.value.splice(evt.oldIndex, 1);setColumns.value.splice(evt.newIndex, 0, oldItem);}})}
​const rowDrag = () => {let el = tableHeader.value.$el.querySelector('.el-table__body-wrapper tbody')Sortable.create(el, {animation: 180,delay: 0,onEnd(evt) {const oldItem = tableData.value[evt.oldIndex]tableData.value.splice(evt.oldIndex, 1);tableData.value.splice(evt.newIndex, 0, oldItem);}})}
</script>
​
<style scoped>.search-title{display: flex;/* justify-content: space-around; */}.search-titleName{color: #409EFF;}.search-icon{cursor: pointer;margin-top: 5px;margin-left: 10px;}
</style>
上述代码中对拖拽功能主要在columnDrag和rowDrag这两个方法,其中onEnd方法是拖拽操作结束执行的方法,在这个方法中,是对当前列或当前行进行一个变量赋值,赋值后对当前列或当前行进行删除,再在newIndex的位置进行插入,就进行了拖拽操作。

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

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

相关文章

mybatis中resultMap和resultType的区别

总结 基本映射 &#xff1a;&#xff08;resultType&#xff09;使用resultType进行输出映射&#xff0c;只有查询出来的列名和pojo中的属性名一致&#xff0c;该列才可以映射成功。&#xff08;数据库&#xff0c;实体&#xff0c;查询字段,这些全部都得一一对应&#xff09;…

编程入门:Visual Studio探秘之旅

编程入门&#xff1a;Visual Studio探秘之旅 步入编程的世界&#xff0c;选择一个合适的开发工具至关重要。Visual Studio&#xff0c;这款由微软推出的强大集成开发环境&#xff08;IDE&#xff09;&#xff0c;无疑是初学者的理想之选。它不仅提供了丰富的功能&#xff0c;还…

运算符分为哪几类?哪些运算符常用作判断?简述运算符的优先级

运算符包含6大类&#xff1a;算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、三元&#xff08;目&#xff09;运算符。 逻辑运算符常用作布尔判断 typeof 运算符: typeof 运算符用于确定变量或表达式的数据类型&#xff0c;并返回一个表示类型的字符串。 typeof …

一文让你清晰了解医疗行业采购堡垒机的必要性

医疗行业&#xff0c;一个与大家息息相关的行业。随着医疗行业的快速发展和信息化建设的深入推进&#xff0c;传统网络安全防护手段已经难以满足现代医疗信息系统的安全需求&#xff0c;特别是在处理敏感的患者信息和保障医院内部数据安全方面。因此采购堡垒机是非常必要的。 堡…

ssm160基于Java技术的会员制度管理的商品营销系统的设计与实现+vue

商品营销系统计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本商品营销系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理…

【面试经典150题】【双指针】392. 判断子序列

题目链接 https://leetcode.cn/problems/is-subsequence/?envTypestudy-plan-v2&envIdtop-interview-150 题解思路 首先如果s的长度大于t的长度&#xff0c;那么s肯定不是t的子序列如果s的长度等于t的长度&#xff0c;那么st的情况下s才是t的子序列如果s的长度小于t的长…

单片机课设-基于单片机的电子时钟设计(仿真+代码+报告)

基于单片机的电子时钟设计 前言一、课设任务是什么?二、系统总体方案硬件设计2.1 系统硬件总体设计2.2 键盘电路设计2.3 DS1302实时时钟芯片电路设计2.4 复位电路2.5 LCD电路设计 三、软件设计3.1 主程序流程图3.2 主要程序设计代码3.3 修改时间函数3.4 扫描键盘函数 四、仿真…

Pytest 记录日志输出到控制台和写入文件

目录 自定义日志记录器和内置的日志记录器 项目代码 项目目录树 自定义日志记录器 函数源代码 pytest中定义和覆盖日志记录信息 使用cli定义Logging 使用pytest.ini定义Logging 修改单个测试级别的日志 日志输出的重要性不言而喻&#xff0c;不仅可以观测执行过程&…

纵深发力 持续推进,富格林平台发展势头喜人

自2024年2月1日正式上线以来,富格林互联网投融资平台已迅速崛起,吸引了业内专家学者的高度认可以及广大投资者的青睐。平台规模持续扩大,目前累计注册用户已超过10万人,总投资额突破50亿美元。这一卓越表现不仅体现了平台的稳健运营和出色的投资项目,也展示了其在互联网投融资领…

bash和sh区别

bash 和 sh 是两种常用的 Unix Shell&#xff0c;它们有一些区别&#xff0c;特别是在功能和兼容性方面。以下是一些主要的区别&#xff1a; 1. **历史与实现**&#xff1a; - sh&#xff08;Bourne Shell&#xff09;是第一个 Unix Shell&#xff0c;最初由 Stephen Bourn…

大型语言模型(LLMs)是如何工作的?

大型语言模型&#xff08;LLMs&#xff09;如ChatGPT、Bing的“Sydney”模式和Google的Bard正在占据新闻头条。与其讨论它们将使哪些工作变得过时&#xff0c;本文将探讨这些模型的工作原理&#xff0c;包括它们从哪里获取数据以及使它们能够生成令人信服的真实文本的基本数学方…

UG编程中圆柱体的精确编程之道

UG编程中圆柱体的精确编程之道 在UG编程的世界中&#xff0c;圆柱体作为一种基础且重要的几何形态&#xff0c;其编程过程既需要精确的技巧&#xff0c;又蕴含着深厚的理论知识。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入探讨如何在UG编程中精确创建圆…

【Docker】Docker 配置镜像加速

Docker配置镜像加速或配置源加速&#xff0c;主要是为了加快Docker镜像的拉取速度&#xff0c;特别是在网络环境较差或需要频繁拉取镜像的情况下。以下是一个详细的配置步骤。 1. 确定要使用的镜像源 首先&#xff0c;你需要选择一个或多个镜像源。以下是一些常见的Docker镜像…

数据结构的队列,链表,栈的基础操作

1&#xff1a;队列 #include <stdio.h>#include <stdlib.h>#include "./02队列.h"/** function: 创建一个空的队列* param [ in] * param [out] * return */Sequeue* xinduilie(){Sequeue* sq (Sequeue*)malloc(sizeof(Sequeue)); if(N…

LAMM: Label Alignment for Multi-Modal Prompt Learning

文章汇总 存在的问题 之前学者的方法主要侧重于适用于所有类别的提示模板&#xff0c;而忽略了每个类别的特征表示。 动机 引入可训练向量来替代多模态提示中的标签词。 流程解读 之前的方法侧重于适用于所有类别的提示模板&#xff0c;而忽略了每个类别的特征表示。作者这…

数字经济红利惠及全民,从掏钱消费到赚钱消费的转变,你准备好了吗?

伴随科技飞速发展&#xff0c;我们迎来了一个全新的经济时代——数字经济。数字经济以其独特的魅力&#xff0c;正为我们每个人带来前所未有的红利。 那么&#xff0c;面对数字经济的红利&#xff0c;我们是否已经做好了准备&#xff1f;我们又该如何把握这个时代赋予我们的机…

上位机图像处理和嵌入式模块部署(h750 mcu vs f407)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在目前工业控制上面&#xff0c;f103和f407是用的最多的两种stm32 mcu。前者频率低一点&#xff0c;功能少一点&#xff0c;一般用在低端的嵌入式设…

PopChar for Mac——文本创作的得力助手

在文本创作过程中&#xff0c;特殊字符和符号的使用往往能够增加文本的表现力和吸引力。PopChar for Mac作为一款专为Mac用户设计的字符输入工具&#xff0c;为你提供了丰富的字符选择。它支持多种字符集和字体&#xff0c;让你能够根据自己的需求选择最适合的字符样式。同时&a…

(2024最新)CentOS 7上在线安装MySQL 5.7|喂饭级教程

在CentOS 7上安装MySQL 5.7并配置允许远程连接&#xff0c;以下是详细步骤&#xff1a; 1. 添加MySQL官方存储库 首先&#xff0c;下载并添加MySQL的官方存储库。默认情况下&#xff0c;添加的存储库可能会包含最新的MySQL版本&#xff08;如MySQL 8.0&#xff09;&#xff0c…

基于LangChain-Chatchat实现的本地知识库的问答应用-快速上手(检索增强生成(RAG)大模型)

基于LangChain-Chatchat实现的本地知识库的问答应用-快速上手&#xff08;检索增强生成(RAG)大模型&#xff09; 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现&#xff0c;开源、可离线部署的检索增强生成(RAG)大模型知识库项目。 1.介绍 一种利用 langchain思想实…