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

element+vue 表格行拖拽功能

解决方案
使用 sortable.js

步骤一: 安装

npm install vuedraggable

步骤二:引入

import Sortable from 'sortablejs';

步骤三: el-table 添加row-key属性,外层包一层 sortableDiv

<div class="sortableDiv">   拖拽的盒子名字sortableDiv
<el-tableref="filterTable"row-key="ip" :data="resourceList" ><el-table-columnprop="name"label="主机名" :min-width="150" show-overflow-tooltip></el-table-column></el-table>

实例:
下图的重点: 1.el-table 添加row-key属性,2.外层包一层 sortableDiv, 3.图标drag-icon在这里插入图片描述

步骤四 : 将拖拽元素设置为要拖动项的父级元素

在这里插入图片描述

在这里插入图片描述

看完整的demo示例:

--------------------------  html  --------------------------
<div class="sortableDiv">   1.拖拽的盒子名字sortableDiv
<el-tableref="filterTable"row-key="id"  :data="planData" v-loading="resourceListLoading" ><el-table-column align="center" label="移入可拖拽(仅支持手工)" width="110px"><template slot-scope="{row, $index}"><i title="拖拽行数据" class="co-icon-move-solid drag-icon" /><span>名字</span></template></el-table-column><el-table-column prop="name" align="center" label="计划名称"></el-table-column></el-table></div>
--------------------------  method  --------------------------
import Sortable from 'sortablejs';
行拖拽
mounted() {this.rowDrop()},// 下面是 methods
rowDrop() {// 获取tbody 第一种const tbody = document.querySelector('.sortableDiv .el-table__body-wrapper tbody')// 获取tbody 第二种   有时候document取不到的时候可以使用refconst myDialog = this.$refs.myDialogconst tbody = myDialog.$el.querySelector('#sortableDiv .el-table .el-table__body-wrapper .el-table__body tbody')const _this = thisSortable.create(tbody, {handle: ' .drag-icon',draggable: '.el-table__row',onEnd({ newIndex, oldIndex }) {const currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})},

相关文章:

element+vue 表格行拖拽功能

解决方案 使用 sortable.js 步骤一&#xff1a; 安装 npm install vuedraggable步骤二&#xff1a;引入 import Sortable from sortablejs;步骤三&#xff1a; el-table 添加row-key属性&#xff0c;外层包一层 sortableDiv <div class"sortableDiv"> 拖…...

Python学习笔记_基础篇(三)_数据类型之列表

一.基本数据类型 整数&#xff1a;int 字符串&#xff1a;str(注&#xff1a;\t等于一个tab键) 布尔值&#xff1a; bool 列表&#xff1a;list &#xff08;元素的集合&#xff09; 列表用[] 元祖&#xff1a;tuple 元祖用&#xff08;&#xff09; 字典&#xff1a;dict 注&a…...

目标检测YOLO实战应用案例100讲-交通目标检测中传感器数据采集容错控制方法

目录 前言 交通传感器数据采集相关理论基础 2.1交通目标检测系统数据采集简介...

ElasticSearch 8.9.0 开发模式安装

ElasticSearch 8.9.0 开发模式安装 MacOS&#xff08;Apple芯片&#xff09;&#xff1a;https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.9.0-darwin-aarch64.tar.gz Linux&#xff1a;https://artifacts.elastic.co/downloads/elasticsearch/elasti…...

docker部署redis

这里写目录标题 1.安装Redis2.新建挂载文件夹3.配置redis4.创建redis容器&#xff0c;挂载启动命令连接测试 Docker停止、删除、重启、启动容器 1.安装Redis 通过docker search redis和docker pull redis下载redis镜像 2.新建挂载文件夹 新建data和conf两个文件夹&#xff0…...

ZooKeeper的应用场景(分布式锁、分布式队列)

7 分布式锁 分布式锁是控制分布式系统之间同步访问共享资源的一种方式。如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源&#xff0c;那么访问这些资源的时候&#xff0c;往往需要通过一些互斥手段来防止彼此之间的干扰&#xff0c;以保证一致性&#xff0c;…...

seata 的部署和集成

文章目录 seata的部署和集成一、部署Seata的tc-server1.下载2.解压3.修改配置4.在nacos添加配置5.创建数据库表6.启动TC服务 二、微服务集成seata1.引入依赖2.修改配置文件 TODO三、TC服务的高可用和异地容灾1.模拟异地容灾的TC集群2.将事务组映射配置到nacos3.微服务读取nacos…...

C++入门基础(万字详解!!!)

文章目录 前言1.C关键字2.命名空间3.C的输入输出4.缺省参数4.1 全缺省4.2 半缺省 5.函数重载6. 引用6.1 引用的特性6.2 引用的使用场景6.3 引用和指针 7.内联函数7.1 特性 8.auto关键字8.1 注意事项 9. 基于范围的for循环9.1 使用条件 10.指针控制nullptr10.1 注意事项 11.总结…...

神经网络基础-神经网络补充概念-53-将batch norm拟合进神经网络

代码实现 import numpy as np import tensorflow as tf from tensorflow.keras.models import Sequential from tensorflow.keras.layers import Dense, BatchNormalization, Activation from tensorflow.keras.optimizers import SGD# 生成随机数据 np.random.seed(0) X np.…...

Sping源码(六)— prepareBeanFactory()

前言 前几篇已经介绍lBeanFactory的创建已经xml配置文件中自定义标签和默认标签的解析过程&#xff0c;此时的BeanFactory中已经包含了xml文件中的标签属性。但BeanFactory中还有一些本身重要的属性没有填充&#xff0c;所以接着方法继续往下看BeanFactory中的属性是如何填充的…...

LeetCode(力扣)257. 二叉树的所有路径Python

LeetCode257. 二叉树的所有路径 题目链接代码 题目链接 https://leetcode.cn/problems/binary-tree-paths/ 代码 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.…...

nodejs实现http与https服务;同时处理proxy代理的解决方案

// nodejs服务提供的http协议示例 const http require(http); const server http.createServer((req, res) > {res.writeHead(200, { Content-Type: text/html;charsetutf8 });res.end(Date.now() > http访问成功8080) }); server.listen(8080, () > {console.lo…...

C# WPF ListBox 动态显示图片

前言 最近在和其他软件联合做一个本地图片选择传输功能&#xff0c;为此希望图片能够有序的呈现在客户端&#xff0c;简单的实现了一下功能&#xff0c;通过Mvvm模式进行呈现&#xff0c;过程简单通俗&#xff0c;话不多说直接上图。 处理过程 前台代码 你只需要粘贴到你的前台…...

游戏如何防御DDOS流量攻击呢,用游戏盾真的有用么?

针对在线游戏行业来说&#xff0c;DDoS&#xff08;分布式拒绝服务&#xff09;攻击是一种极具破坏性的威胁。DDoS攻击可能导致游戏服务器不可用&#xff0c;严重影响游戏体验和运营。为了解决这一问题&#xff0c;游戏盾作为一种专门为游戏行业设计的安全解决方案&#xff0c;…...

vue项目引入antDesignUI组件

快速安装ant-design-vue并配置&#xff0c;vue2.0 antDesign1.7.8 第一步&#xff1a;安装ant-deisgn-vue 1.7.8 npm install ant-design-vue1.7.8 --save第二步&#xff1a;配置package.json文件&#xff0c;将依赖写入后&#xff0c;npm install 安装依赖 "dependenc…...

非结构化数据库-MinIO基本集成

是什么 MinIO 是一个高性能的分布式对象存储服务&#xff0c;适合存储非结构化数据&#xff0c;如图片&#xff0c;音频&#xff0c;视频&#xff0c;日志等。对象文件最大可以达到5TB。 安装启动 mkdir -p /usr/local/minio cd /usr/local/minio# 下载安装包 wget https:/…...

Etcd备份及恢复

一、Etcd数据备份 1、备份命令 [rootlocalhost ~]# export ETCDCTL_API3 [rootlocalhost ~]# /data/etcd-3.4.9/bin/etcdctl --endpoints10.2.20.108:2379 snapshot save etcd-date "%Y-%m-%d_%H-%M-%S".snapshot 2、备份完成后会在当前目录生成备份文件 [rootlo…...

使用JavaMail发送邮件时嵌入公司logo图片

使用JavaMail发送邮件时嵌入公司logo图片 第一种方式&#xff1a;img标签和logo图片链接第二种方式&#xff1a;使用img标签和图片base64字符串第三种方式&#xff08;推荐&#xff09;&#xff1a;将logo当做附件一起发送并设置ContentID&#xff0c;再使用img标签&#xff0c…...

注解 @Async

注解 Async 1. 注解由来&#xff1a; Async 是 Spring 框架提供的注解&#xff0c;用于将方法标记为异步执行。通过使用 Async 注解&#xff0c;可以告知 Spring 在调用被注解的方法时&#xff0c;使用新的线程或线程池进行异步执行。 2. 注解示例&#xff1a; import org.s…...

Python“牵手”lazada商品评论数据采集方法,lazadaAPI申请指南

lazada平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;lazadaAPI接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问lazada平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现la…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...