Element table 实现表格行、列拖拽功能

安装包

npm install sortablejs --save

<template><div class="draggable" style="padding: 20px"><el-table row-key="id" :data="tableData" style="width: 100%" border><el-table-columnv-for="(item, index) in oldList":key="`col_${index}`":prop="newList[index].prop":label="item.label"align="center"></el-table-column></el-table></div>
</template>
<script>
import Sortable from 'sortablejs'export default {mounted () {this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))this.columnDrop()this.rowDrop()},data () {return {oldList: [],newList: [],tableData: [{id: 1,name: '李一',gender: '男',age: 30,job: '会计'},{id: 2,name: '王二',gender: '未知',age: 18,job: '无业游民'},{id: 3,name: '张三',gender: '男',age: 50,job: '老板'}],tableConfig: {tableItems: [{label: '姓名',prop: 'name'},{label: '性别',prop: 'gender'},{label: '年龄',prop: 'age'},{label: '工作',prop: 'job'}]}}},methods: {// 行拖拽rowDrop () {// 此时找到的元素是要拖拽元素的父容器const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')const _this = thisSortable.create(tbody, {//  指定父元素下可被拖拽的子元素draggable: '.draggable .el-table__row',onEnd ({ newIndex, oldIndex }) {const currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})},// 列拖拽columnDrop () {const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: (evt) => {const oldItem = this.newList[evt.oldIndex]this.newList.splice(evt.oldIndex, 1)this.newList.splice(evt.newIndex, 0, oldItem)}})}}
}
</script>
<style scoped></style>

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

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

相关文章

趣学贝叶斯统计:贝叶斯定理和乐高积木

利用贝叶斯定理&#xff0c;可以将条件概率倒置。知道P(B|A)&#xff0c;就可以求出P(A|B)。例如&#xff0c;知道感冒时你打喷嚏的概率&#xff0c;就可以倒过来判断打喷嚏时你感冒的概率。这样&#xff0c;我们就用数据更新了自己对世界的信念。 目录 1. 运用乐高2. 通过数学…

SpringBoot和SpringCloud的区别,使用微服务的好处和缺点

SpringBoot是一个用于快速开发单个Spring应用程序的框架&#xff0c;通过提供默认配置和约定大于配置的方式&#xff0c;快速搭建基于Spring的应用。让程序员更专注于业务逻辑的编写&#xff0c;不需要过多关注配置细节。可以看成是一种快速搭建房子的工具包&#xff0c;不用从…

C语言:指针的进阶讲解

目录 1. 二级指针 1.1 二级指针是什么&#xff1f; 1.2 二级指针的作用 2. 一维数组和二维数组的本质 3. 指针数组 4. 数组指针 5. 函数指针 6. typedef的使用 7. 函数指针数组 7.1 转移表 1. 二级指针 如果了解了一级指针&#xff0c;那二级指针也是可以很好的理解…

【安卓逆向】app防止截屏分析与去除

本次分析的app name为&#xff1a;5paH5qGI54uX 这款应用打开之后里面的内容是不允许截图的&#xff0c;防止截图分析&#xff1a;Android应用防止截屏_landroid/view/window;->setflags 0x2000-CSDN博客 App防止恶意截屏功能的方法&#xff1a;iOS、Android和鸿蒙系统的实…

红日靶场3

靶场链接&#xff1a;漏洞详情 在虚拟机的网络编辑器中添加两个仅主机网卡 信息搜集 端口扫描 外网机处于网端192.168.1.0/24中&#xff0c;扫描外网IP端口&#xff0c;开放了80 22 3306端口 80端口http服务&#xff0c;可以尝试登录网页 3306端口mysql服务&#xff0c;可…

7-liunx服务器规范

目录 概况liunx日志liunx系统日志syslog函数openlog 可以改变syslog默认输出方式 &#xff0c;进一步结构化 用户信息进程间的关系会话ps命令查看进程关系 系统资源限制改变工作目录和根目录服务器程序后台话 概况 liunx服务器上有很多细节需要注意 &#xff0c;这些细节很重要…

nodejs+vue+ElementUi废品废弃资源回收系统

系统主要是以后台管理员管理为主。管理员需要先登录系统然后才可以使用本系统&#xff0c;管理员可以对系统用户管理、用户信息管理、回收站点管理、站点分类管理、站点分类管理、留言板管理、系统管理进行添加、查询、修改、删除&#xff0c;以保障废弃资源回收系统系统的正常…

瑞_23种设计模式_装饰者模式

文章目录 1 装饰者模式&#xff08;Decorator Pattern&#xff09;1.1 介绍1.2 概述1.3 装饰者模式的结构 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析5 总结5.1 装饰者模式的优缺点5.2 装饰者模式的使用场景5.3 装饰者模式 VS 代理模式 &#x…

创作纪念日:记录我的成长与收获

机缘 一开始是在我深入学习前端知识的Vue.js框架遇到了一个问题&#xff0c;怎么都解决不了&#xff0c;心烦意乱地来csdn上找解决方法。开心的是真被我找到了&#xff0c;真的很感恩&#xff0c;也意识到在这个平台上分享自己的经验是多么有意义的事情&#xff0c;可能随便的…

Python爬虫-付费代理推荐和使用

付费代理的使用 相对免费代理来说&#xff0c;付费代理的稳定性更高。本节将介绍爬虫付费代理的相关使用过程。 1. 付费代理分类 付费代理分为两类&#xff1a; 一类提供接口获取海量代理&#xff0c;按天或者按量收费&#xff0c;如讯代理。 一类搭建了代理隧道&#xff0…

【前端素材】推荐优质后台管理系统Welly平台模板(附源码)

一、需求分析 后台管理系统&#xff08;或称作管理后台、管理系统、后台管理平台&#xff09;是一种专门用于管理网站、应用程序或系统后台运营的软件系统。它通常由一系列功能模块组成&#xff0c;为管理员提供了管理、监控和控制网站或应用程序的各个方面的工具和界面。以下…

WSL2配置Linux、Docker、VS Code、zsh、oh my zsh(附Docker开机自启设置)

0. 写在前面 本篇笔记来自于UP主麦兜搞IT的合集视频Windows10开发环境搭建中的部分内容 1. 安装WSL2 按照微软官方文档进行操作&#xff0c;当然也可以直接wsl --install 也可以按照 旧版手动安装的步骤 来进行操作 选择安装的是Ubuntu 20.04 LTS 注&#xff1a;WSL默认安装…

NATS学习笔记(一)

NATS是什么&#xff1f; NATS是一个开源的、轻量级、高性能的消息传递系统&#xff0c;它基于发布/订阅模式&#xff0c;由Apcera公司开发和维护。 NATS的功能 发布/订阅&#xff1a;NATS的核心是一个发布/订阅消息传递系统&#xff0c;允许消息生产者发布消息到特定的主题…

如何使用ArcGIS Pro生成等高线

无论在制图还是规划中&#xff0c;经常会使用到等高线&#xff0c;大多数情况下&#xff0c;从网上获取的高程数据都是DEM文件&#xff0c;我们可以通过ArcGIS Pro来生成等高线&#xff0c;这里为大家介绍一下生成方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的…

解析OOM的三大场景,原因及实战解决方案

目录 一、什么是OOM 二、堆内存溢出&#xff08;Heap OOM&#xff09; 三、方法区内存溢出&#xff08;Metaspace OOM&#xff09; 四、栈内存溢出&#xff08;Stack OOM&#xff09; 一、什么是OOM OOM 是 Out Of Memory 的缩写&#xff0c;意思是内存耗尽。在计算机领域…

vue3+js 实现记住密码功能

常见的几种实现方式 1 基于spring security 的remember me 功能 ​​​​​​​ localStorage 除非主动清除localStorage 里的信息 &#xff0c;不然永远存在&#xff0c;关闭浏览器之后下次启动仍然存在 存放数据大小一般为5M 不与服务器进行交互通信 cookies 可以…

GEE数据集——GLANCE 全球土地覆被训练数据集

GLANCE 全球土地覆被训练数据集 GLanCE 培训数据集向公众开放&#xff0c;专为区域到全球土地覆被和土地覆被变化分析而设计。该数据集的中等空间分辨率为 30 米&#xff0c;时间跨度为 1984 年至 2020 年&#xff0c;在地理和光谱上代表了全球所有生态区域。每个训练单元提供多…

module ‘json‘ has no attribute ‘dumps‘

如果在使用Python的json模块时遇到AttributeError: module json has no attribute dumps错误&#xff0c;通常是因为在Python环境中json模块不支持dumps方法。这种情况可能是因为Python的json模块被重命名或修改过导致的。 解决方法可以尝试以下几种&#xff1a; 1.检查Pytho…

流程图:理解、创建与优化的视觉工具

流程图&#xff1a;理解、创建与优化的视觉工具 引言 在日常生活和工作中&#xff0c;我们经常遇到需要描述一系列步骤或过程的情况。这些步骤可能是制作一杯咖啡、完成一个项目&#xff0c;或者是解决一个复杂的数学问题。流程图&#xff0c;作为一种强大的视觉工具&#xf…

【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议(SAPA 2024)

2024年软件自动化与程序分析国际学术会议&#xff08;SAPA 2024) 2024 International Conference on Software Automation and Program Analysis 在当今科技社会中&#xff0c;软件产业呈快速发展趋势&#xff0c;软件自动化与程序分析技术在提高软件质量、降低开发成本、提升…