实现简单的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('成功')}})}},

第六步,实现效果

在这里插入图片描述

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

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

相关文章

基于Spring Boot的机场VIP客户管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的机场VIP客户管理系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java s…

6G 特点及表现

6G R&D Vision: Requirements and Candidate Technologies 5G已经提出来了大移动带宽&#xff0c;低时延和大规模机器互联&#xff0c;在这个基础上&#xff0c;6G加上了高可靠性&#xff0c;高定位精度和高智能化。 6G的主要候选技术&#xff0c;包括(子) THz 通信&#x…

微服务-Nacos(配置管理)

配置更改热更新 在Nacos中添加配置信息&#xff1a; 在弹出表单中填写配置信息&#xff1a; 配置获取的步骤如下&#xff1a; 1.引入Nacos的配置管理客户端依赖&#xff08;A、B服务&#xff09;&#xff1a; <!--nacos的配置管理依赖--><dependency><groupId&…

【仿写tomcat】五、响应静态资源(访问html页面)、路由支持以及多线程改进

访问html页面 如果我们想访问html页面其实就是将本地的html文件以流的方式响应给前端即可&#xff0c;下面我们对HttpResponseServlet这个类做一些改造 package com.tomcatServer.domain;import com.tomcatServer.utils.ScanUtil;import java.io.IOException; import java.io…

Facebook AI mBART:巴别塔的硅解

2018年&#xff0c;谷歌发布了BERT&#xff08;来自transformers的双向编码器表示&#xff09;&#xff0c;这是一种预训练的语言模型&#xff0c;在一系列自然语言处理&#xff08;NLP&#xff09;任务中对SOTA结果进行评分&#xff0c;并彻底改变了研究领域。类似的基于变压器…

Tomcat 一次请求的生命周期

在使用 Tomcat 的时候&#xff0c;我们只需要在 Servlet 实现类中写我们的业务逻辑代码即可&#xff0c;不需要管 Socket 连接、协议处理要怎么实现&#xff0c;因为这部分作为不经常变动的部分&#xff0c;被封装到了 Tomcat 中&#xff0c;程序员只需要引入 Tomcat 中即可&am…

免费开源服务器资源监控系统grafana+prometheus+node_exporter

有项目做测试的时候需要查询服务器资源利用情况&#xff0c;自己又没写相应的模块&#xff0c;此时就需要一套好用的资源监控系统&#xff0c;&#xff0c;咨询了运维人员给推荐了一套&#xff0c;装完后真的很好用。 就是grafanaprometheusnode_exporter&#xff08;linux&am…

三、Kafka生产者

目录 3.1 生产者消息发送流程3.1.1 发送原理 3.2 异步发送 API3.3 同步发送数据3.4 生产者分区3.4.1 kafka分区的好处3.4.2 生产者发送消息的分区策略3.4.3 自定义分区器 3.5 生产者如何提高吞吐量3.6 数据可靠性 3.1 生产者消息发送流程 3.1.1 发送原理 3.2 异步发送 API 3…

30.Netty源码服务端启动主要流程

highlight: arduino-light 服务端启动主要流程 •创建 selector •创建 server socket channel •初始化 server socket channel •给 server socket channel 从 boss group 中选择一个 NioEventLoop •将 server socket channel 注册到选择的 NioEventLoop 的 selector •…

Ubuntu20.04安装Nvidia显卡驱动教程

1、禁用nouveau 1、创建文件&#xff0c;如果没有下载vim编辑器&#xff0c;将vim换成gedit即可 $ sudo vim /etc/modprobe.d/blacklist-nouveau.conf 2、在文件中插入以下内容&#xff0c;将nouveau加入黑名单&#xff0c;默认不开启 blacklist nouveau options nouveau m…

计算机技术与软件专业技术资格(水平)考试----系统架构设计师

【原文链接】计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试----系统架构设计师 考试简介 计算机软件资格考试是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试。计算机软件资格考试既是职业资格考试&#xff0c;又是职称资格考试。考试合格…

在线HmacSHA256加密工具--在线获取哈希值又称摘要

具体请前往&#xff1a; 在线计算HmacSha256工具

unity 之 Input.GetMouseButtonDown 的使用

文章目录 Input.GetMouseButtonDown Input.GetMouseButtonDown 当涉及到处理鼠标输入的时候&#xff0c;Input.GetMouseButtonDown 是一个常用的函数。它可以用来检测鼠标按键是否在特定帧被按下。下面我会详细介绍这个函数&#xff0c;并举两个例子说明如何使用它。 函数签名…

C语言——通讯录详解(文件版)

文件版通讯录 前言&#xff1a;一、保存通讯录二、读取通讯录2.1 通讯录初始化2.2 将文件的信息加载到通讯录 三、代码展示3.1通讯录的声明和定义(contct.h)3.2通讯录函数的实现&#xff08;contact.c&#xff09;3.2 通讯录的测试(test.c) 前言&#xff1a; 我们已经掌握了通…

Oracle19c-补丁升级报错合集(一)

前言: 本文主要介绍Oracle19c补丁升级遇到的问题&#xff0c;涉及安装补丁prepatch步骤&#xff0c;apply应用报错以及datapatch -verbose数据字典更新报错 问题一: 在执行补丁rootcrs.sh -prepatch操作时&#xff0c;发生执行检查命令cluutil -chkshare报错 CLSRSC-180: An …

记录首次面试2023-08-18

人生第一次面试&#xff0c;大概一个小时左右。没有问我C的&#xff0c;上来一个数据库事务&#xff0c;虽然没有复习&#xff0c;但是还是能够记住一些&#xff0c;主要问的一些事务的隔离级别&#xff0c;以及都有什么作用&#xff0c;我是举例回答的&#xff0c;客户端A和客…

14.pod控制器

文章目录 pod控制器概述有状态和无状态DeploymentDaemonSetSatefulSet配置 JobCronJob总结 pod控制器 概述 Pod控制器及其功用 Pod控制器&#xff0c;又称之为工作负载&#xff08;workload&#xff09;&#xff0c;是用于实现管理pod的中间层&#xff0c;确保pod资源符合预期…

设计模式笔记

工厂模式&#xff1a; 1.Simple Factory Pattern : 是指由一个工厂对象决定创建出哪一种产品类的实例&#xff0c;简单工厂是产品的工厂&#xff0c;工厂类负责创建的对象较少&#xff0c;客户端需要传入工厂类的参数&#xff0c;对于如何创建对象的逻辑不关心。 缺点&#xf…

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式 图像是任何 Web 应用程序的重要组成部分&#xff0c;但如果优化不当&#xff0c;它们也可能成为性能问题的主要根源。在本文中&#xff0c;我们将介绍如何使用 Node.js 自动生成优化的图像格式&#xff0c;并以最适合用户浏览器的格式显示它们…

Eureka:服务注册-信息配置-自我保护机制

首先在提供者服务下&#xff0c;添加一个依赖 <!-- Eureka --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka</artifactId><version>1.4.6.RELEASE</version><…