当前位置: 首页 > news >正文

实现简单的element-table的拖拽效果

第一步,先随便创建element表格

    <el-table ref="dragTable" :data="tableData" style="width: 100%" border fit highlight-current-row><el-table-column label="日期" width="180"><template slot-scope="{ row }"><span>{{ row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="{ row }"><span>{{ row.name }}</span></template></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="拖拽"><template><i style="cursor: pointer;" class="el-icon-setting"></i></template></el-table-column></el-table>

第二步,里面的数据源tableData直接复制饿了么上的

第三步,需要安装sortablejs库并且在头部引入

import Sortable from 'sortablejs'

第四步,通过ref获取table,这里给table的ref设置为dragTable

在这里插入图片描述

第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后需要注意的是需要再生命周期函数mounted里调用这个方法,因为这个方法可以获取dom

  data() {return {sortable: null,};},mounted() {this.dragTable()},methods: {dragTable() {const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]this.sortable = Sortable.create(el, {onEnd: () => {alert('成功')}})}},

第六步,实现效果

在这里插入图片描述

相关文章:

实现简单的element-table的拖拽效果

第一步&#xff0c;先随便创建element表格 <el-table ref"dragTable" :data"tableData" style"width: 100%" border fit highlight-current-row><el-table-column label"日期" width"180"><template slot-sc…...

Web网页浏览器远程访问jupyter notebook服务器【内网穿透】

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…...

干翻Dubbo系列第十一篇:Dubbo常见协议与通信效率对比

文章目录 文章说明 一&#xff1a;协议 1&#xff1a;什么是协议 2&#xff1a;协议和序列化关系 3&#xff1a;协议组成 &#xff08;一&#xff09;&#xff1a;头信息 &#xff08;二&#xff09;&#xff1a;体信息 4&#xff1a;Dubbo3中常见的协议 5&#xff1a;…...

春秋云镜 CVE-2020-17530

春秋云镜 CVE-2020-17530 S2-061 靶标介绍 对CVE-2019-0230的绕过&#xff0c;Struts2官方对CVE-2019-0230的修复方式是加强OGNL表达式沙盒&#xff0c;而CVE-2020-17530绕过了该沙盒。当对标签属性中的原始用户输入进行评估时&#xff0c;强制 OGNL 评估可能会导致远程代码执…...

【java毕业设计】基于Spring Boot+Vue+mysql的论坛管理系统设计与实现(程序源码)-论坛管理系统

基于Spring BootVuemysql的论坛管理系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于Spring BootVuemysql的论坛管理系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及论文的获取…...

华为在ospf area 0单区域的情况下结合pbr对数据包的来回路径进行控制

配置思路&#xff1a; 两边去的包在R1上用mqc进行下一跳重定向 两边回程包在R4上用mqc进行下一跳重定向 最终让内网 192.168.10.0出去的数据包来回全走上面R-1-2-4 192.168.20.0出去的数据包来回全走 下面R1-3-4 R2和R3就是简单ospf配置和宣告&#xff0c;其它没有配置&#…...

PyQt5登录界面跳转

目录 1、设计ui界面 2、设计逻辑代码&#xff0c;实现登录界面跳转 3、结果 1、设计ui界面 设计后的ui界面 在这里可以设置密码不显示 这里可以设置快捷键 最后将ui界面转为py文件后获得的逻辑代码为&#xff1a;&#xff08;文件名为Login.py&#xff09; # -*- coding: u…...

git add 用法

git add 是 Git 的一个命令&#xff0c;用于将更改的文件加入到暂存区&#xff08;staging area&#xff09;&#xff0c;准备提交这些更改。以下是该命令的常见用法&#xff1a; 添加单个文件 git add 文件名添加多个文件 git add 文件名1 文件名2 ...添加所有当前目录下的更改…...

系统架构设计师---2018年下午试题1分析与解答(试题三)

系统架构设计师---2018年下午试题1分析与解答 试题三 阅读以下关于嵌入式实时系统相关技术的叙述,在答题纸上回答问题 1 和问题 2。 【说明】 某公司长期从事宇航领域嵌入式实时系统的软件研制任务。公司为了适应未来嵌入式系统网络化、智能化和综合化的技术发展需要,决定…...

面试时如何回答接口测试怎么进行

一、什么是接口测试 接口测试顾名思义就是对测试系统组件间接口的一种测试&#xff0c;接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 …...

【LeetCode】647.回文子串

题目 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会…...

【Git】SSH到底是什么

一、SSH初探 1、SSH是什么&#xff1f; SSH是一个安全协议&#xff0c;类似有SSL、TSL Git有四种协议&#xff1a;本地协议、Git协议、HTTP协议、SSH协议 SSH协议的优缺点&#xff1a; 优点&#xff1a;SSH访问更加安全&#xff0c;有利于公司的开发维护&#xff0c;并且可…...

当你出差在外时,怎样轻松访问远程访问企业局域网象过河ERP系统?

文章目录 概述1.查看象过河服务端端口2.内网穿透3. 异地公网连接4. 固定公网地址4.1 保留一个固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址连接 概述 ERP系统对于企业来说重要性不言而喻&#xff0c;不管是财务、生产、销售还是采购&#xff0c;都需要用到ERP系统来协助。…...

机器学习与模型识别1:SVM(支持向量机)

一、简介 SVM是一种二类分类模型&#xff0c;在特征空间中寻找间隔最大的分离超平面&#xff0c;使得数据得到高效的二分类。 二、SVM损失函数 SVM 的三种损失函数衡量模型的性能。 1. 0-1 损失&#xff1a; 当正例样本落在 y0 下方则损失为 0&#xff0c;否则损失为…...

在CentOS7.9上安装最新版本Docker安装步骤

1、查看系统版本&#xff1a; cat /etc/redhat-release 2、卸载原有版本&#xff08;如有的话&#xff09; sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ d…...

基于 spring boot 的动漫信息管理系统【源码在文末】

半山腰总是最挤的&#xff0c;你得去山顶看看 大学生嘛&#xff0c;论文写不出&#xff0c;代码搞不懂不要紧&#xff0c;重要的是&#xff0c;从这一刻就开始学习&#xff0c;立刻马上&#xff01; 今天带来的是最新的选题&#xff0c;基于 spring boot 框架的动漫信息管理系…...

vue项目根据word模版导出word文件

一、安装依赖 //1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver npm install file-saver --save二、创建word模版 也就是编辑一个word文档&#xff0c;文档中需要动态取值的…...

PHP 从 URL(链接) 字符串中获取参数

PHP 从 URL&#xff08;链接&#xff09; 字符串中获取参数 //URL(链接)字符串 $url https://www.baidu.com/?name小洪帽i&sex男&age999; //parse_url 函数从一个 URL 字符串中获取参数 $urlparse_url($url); //输出获取到的内容 echo "<pre>"; pri…...

第一百三十一天学习记录:数据结构与算法基础:栈和队列(下)(王卓教学视频)

队列的表示和操作的实现 循环顺序队列是一种使用数组来实现的队列结构&#xff0c;其中头指针和尾指针表示队列的头部和尾部位置。 当队列为空时&#xff0c;头指针和尾指针都指向同一个位置&#xff0c;即数组的第一个位置。这是因为在空队列中&#xff0c;没有任何元素可以作…...

全球磁强计市场价值约为16.2亿美元,预测期内将以超过5.21%的增长率增长

磁强计是一种用于测量磁场强度和方向的仪器。它可以检测和测量地球磁场、物体的磁性、地下矿藏、磁性材料等。磁强计在地球科学、物理学、地质学、勘探、矿业等领域具有广泛的应用。 根据阿谱尔&#xff08;APO&#xff09;的统计及预测&#xff0c;2022年全球磁强计市场价值约…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...