实现简单的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.hqwc.cn/news/76037.html

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

相关文章

python高级基础

文章目录 python高级基础闭包修饰器单例模式跟工厂模式工厂模式单例模式 多线程多进程创建websocket服务端手写客户端 python高级基础 闭包 简单解释一下闭包就是可以在内部访问外部函数的变量&#xff0c;因为如果声明全局变量&#xff0c;那在后面就有可能会修改 在闭包中的…

前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色

随着技术的发展&#xff0c;开发的复杂度也越来越高&#xff0c;传统开发方式将一个系统做成了整块应用&#xff0c;经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改&#xff0c;造成牵一发而动全身。 通过组件化开发&#xff0c;可以有效实现…

RS232、RS422、RS485硬件及RS指令、RS2指令应用知识学习

RS232、RS422、RS485硬件及RS指令、RS2指令应用知识学习 一、串行&#xff08;异步/同步)通讯、并行通讯、以太网通讯 二、单工通讯/半双工通讯/双工通讯 三、常用硬件接口&#xff08;工业上基本是RS485两线制的接线&#xff09; 常用硬件接口RS232/RS422/RS485&#xff0c;…

LeetCode--HOT100题(37)

目录 题目描述&#xff1a;104. 二叉树的最大深度&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;104. 二叉树的最大深度&#xff08;简单&#xff09; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远…

快速上手PyCharm指南

PyCharm简介 PyCharm是一种Python IDE&#xff08;Integrated Development Environment&#xff0c;集成开发环境&#xff09;&#xff0c;带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具&#xff0c;比如调试、语法高亮、项目管理、代码跳转、智能提示、自动…

怎么借助ChatGPT处理数据结构的问题

目录 使用ChatGPT进行数据格式化转换 代码示例 ChatGPT格式化数据提示语 代码示例 批量格式化数据提示语 代码示例 ChatGPT生成的格式化批处理代码 使用ChatGPT合并不同数据源的数据 合并数据提示语 自动合并数据提示语 ChatGPT生成的自动合并代码 结论 数据合并是…

二重积分小技巧---交换积分

又一个奇技淫巧。 ∫ 0 1 d y ∫ y 1 x 3 1 d x ? \int _0 ^1 dy \int _{\sqrt y} ^ 1 \sqrt{x^3 1} dx ? ∫01​dy∫y ​1​x31 ​dx? 解析&#xff1a; 不说话&#xff0c;看下图&#xff1a; ∫ 0 1 d y ∫ y 1 x 3 1 d x ∫ 0 1 d x ∫ 0 x 2 x 3 1 d y ∫ 0 …

Redis从基础到进阶篇(一)

目录 一、了解NoSql 1.1 什么是Nosql 1.2 为什么要使用NoSql 1.3 NoSql数据库的优势 1.4 常见的NoSql产品 1.5 各产品的区别 二、Redis介绍 2.1什么是Redis 2.2 Redis优势 2.3 Redis应用场景 2.4 Redis下载 三、Linux下安装Redis 3.1 环境准备 3.2 Redis的…

SQLite数据库实现数据增删改查

当前文章介绍的设计的主要功能是利用 SQLite 数据库实现宠物投喂器上传数据的存储&#xff0c;并且支持数据的增删改查操作。其中&#xff0c;宠物投喂器上传的数据包括投喂间隔时间、水温、剩余重量等参数。 实现功能&#xff1a; 创建 SQLite 数据库表&#xff0c;用于存储宠…

AI 绘画Stable Diffusion 研究(十三)SD数字人制作工具SadTlaker使用教程

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 想必大家经常看到&#xff0c;无论是在产品营销还是品牌推广时&#xff0c;很多人经常以数字人的方式来为自己创造财富。而市面上的数字人收费都比较昂贵&#xff0c;少则几…

AMBA总线协议(3)——AHB(一)

目录 一、前言 二、什么是AHB总线 1、概述 2、一个典型的基于AHB总线的微处理器架构 3、基本的 AHB 传送特性 三、AMBA AHB总线互联 四、小结 一、前言 在之前的文章中我们初步的了解了一下AMBA总线中AHB,APB,AXI的信号线及其功能&#xff0c;从本文开始我们…

vue + vue-office 实现多种文件(docx、excel、pdf)的预览

支持多种文件( docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》 演 示&#xff1a; 《演示效果》 功能特色 一站式&#xff1a;提供docx、pdf、excel多种文档的在线预览方案&#xff0c;有它就够了简单&#xff1a…