Vue中el-tree结合vuedraggable实现跨组件元素拖拽

实现效果:

左侧el-tree:

<template><el-treeclass="filter-tree":data="treeData":props="defaultProps":filter-node-method="filterNode"node-key="id"draggable:allow-drop="allowDrop"@node-drag-start="handleDragStart"@node-drag-end="handleDragEndz"ref="tree"></el-tree>
</template>
<script>data() {return {treeData:[],defaultProps: {children: 'children',label: 'datasetColumnName'},}},methods: {filterNode(value, data) {if (!value) return true;return data.datasetColumnName.indexOf(value) !== -1;},// 阻止el-tree默认拖拽allowDrop() {return false;},handleDragStart() {console.log(node.data)if(!node.data.aqlStr) returnthis.draggingItem = node.datathis.isShowDragging = true},handleDragEndz() {this.isShowDragging = false},}
</script>

右侧vuedraggable接收,先npm install vuedraggable,main.js中引入:

import draggable from 'vuedraggable';

Vue.use(draggable)

使用如下:

<draggable v-model="dragList" class="drag_list" :class="{ 'hint': isShowDragging?true:false }" animation="1000"  group="items" @dragover="handleDragOver" @drop="handleTargetDrop($event)"><div class="add_tip" v-if="dragList.length <= 0"><i class="el-icon-plus"></i></div><template v-else v-for="(item, index) in dragList" :key="index">其他代码</template>
</draggable>
<script>export default {data() {return {}},methods: {handleDragOver(e) {e.preventDefault();},handleTargetDrop(e, index) {e.preventDefault();// 阻止冒泡e.stopPropagation();// 将el-tree选中的数据放入dragList中this.dragList.push(this.draggingItem)// 刷新页面this.$forceUpdate()}}}
</script>

文章参考:

https://blog.csdn.net/Turn_to_empty/article/details/126759544

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

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

相关文章

PHP民宿酒店预订系统小程序源码

&#x1f3e1;民宿酒店预订系统 基于ThinkPHPuniappuView框架精心构建的多门店民宿酒店预订管理系统&#xff0c;能够迅速为您搭建起专属的、功能全面且操作便捷的民宿酒店预订小程序。 该系统不仅涵盖了预订、退房、WIFI连接、用户反馈、周边信息展示等核心功能&#xff0c;更…

在 Ubuntu 22.04 上从 Wayland 切换到 X11的详细步骤

在 Ubuntu 22.04 上从 Wayland 切换到 X11&#xff0c;步骤其实很简单&#xff0c;主要是在登录界面进行选择。以下是详细的步骤&#xff1a; 步骤 1&#xff1a;退出当前会话 首先&#xff0c;点击屏幕右上角的用户菜单&#xff0c;选择 注销 或 退出&#xff0c;以退出当前…

点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)

文章目录 1. tabBar 的跳转方式2. tabBar 跳转的特点3. 你的配置分析4. 生命周期触发情况5. 总结 很多人不明白什么是第一次加载&#xff0c;两种情况讨论&#xff0c;第一种情况假设我是开发者&#xff0c;第一次加载就是指点击微信开发者工具上边的编译按钮&#xff0c;每点击…

三维卷积( 3D CNN)

三维卷积&#xff08; 3D CNN&#xff09; 1.什么是三维卷积 1.1 三维卷积简介 二维卷积是在单通道的一帧图像上进行滑窗操作&#xff0c;输入是高度H宽度W的二维矩阵。 三维卷积输入多了深度C这个维度&#xff0c;输入是高度H宽度W深度C的三维矩阵。在卷积神经网络中&…

git 提交命令记录

1.已有本地和远程仓库 查看仓库远程地址: git remote -v 大量提交 git add . git commit -m "提交说明" git push 之后输入用户名密码 删除文件 git rm 文件名 替代git add 后面一样 2.全新提交 新建远程仓库 git init touch README.md git add . …

电脑硬盘系统迁移及问题处理

一、系统迁移准备 1、确认你的电脑主板是否支持安装两块硬盘,如电脑主板有多个M2硬盘接口,我们将新硬盘安装到主板上,原来的老硬盘安装在第二个接口上,主板只有一个M2接口的话可以使用移动硬盘盒。 2、新硬盘安装好后,我们进入原来的系统,在 此电脑–右键–管理–磁盘管…

游戏语音的历史是什么样的?

游戏中&#xff0c;离不开游戏社交。 无社交&#xff0c;不游戏&#xff0c;大家都深知社交在游戏体验中的重要性。 游戏语音的发展史是怎么样的&#xff1f;问了下AI&#xff0c;给我的回答是 早期阶段 1970年代&#xff1a;1970年代出现了第一个语音游戏“尤瓦尔的冒险”&am…

Go语言的循环实现

Go语言中的循环实现 引言 在编程中&#xff0c;循环是控制程序执行的重要结构&#xff0c;它允许程序重复执行某段代码&#xff0c;直到满足特定条件为止。不同的编程语言对循环的实现方式各有不同。在众多编程语言中&#xff0c;Go语言凭借其简洁性和高效性备受青睐。这篇文…

web服务器快速目录搜索遍历工具推荐:Dirsearch

Dirsearch是一个快速而强大的目录搜索工具。Dirsearch是一个用于在web服务器上遍历目录的多功能工具。使用Python编写&#xff0c;支持多线程&#xff0c;自定义请求以及与各种字典的配合。 安装方法&#xff1a; 确保安装了Python 3&#xff1a; sudo apt install python3下…

GDPU Android移动应用 重点习题集

目录 程序填空 ppt摘选 题目摘选 “就这两页ppt&#xff0c;你还背不了吗” “。。。” 打开ppt后 “Sorry咯&#xff0c;还真背不了&#x1f61c;” 更新日志 考后的更新日志 没想到重点勾了一堆&#xff0c;还愣是没考到其中的内容&#xff0c;翻了一下&#xff0c;原…

排序:插入、选择、交换、归并排序

排序 &#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性 &#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#xff0c;…

CentOS7修改Docker默认存储路径

当你使用Docker时&#xff0c;Docker的默认配置是将镜像、容器和卷存储在系统/var/lib/docker/目录下&#xff0c;如果docker镜像安装的太多会导致磁盘不够&#xff0c;你可以尝试以下方法来释放空间&#xff1a; 清理无用的镜像和容器&#xff1a;使用docker命令删除不再使用…

计算机网络 (34)可靠传输的工作原理

前言 计算机网络可靠传输的工作原理主要依赖于一系列协议和机制&#xff0c;以确保数据在传输过程中能够准确无误地到达目的地。 一、基本概念 可靠传输指的是数据链路层的发送端发送什么&#xff0c;在接收端就收到什么&#xff0c;即保证数据的完整性、正确性和顺序性。由于网…

C++:string

一、string概念 之前介绍过通过字符数组保存字符串&#xff0c;然后对字符数组中的字符串做各种操作&#xff1b;为了更加简单方便&#xff0c;在C中&#xff0c;又增加了 string 来处理字符串。 char str[20] "hello world"; string 字符串其实是一种更加高级的封…

SQL Server 数据库给第三方用户开权限,限制可见内容

单独数据库权限的设置&#xff1a; 方法&#xff1a; 给外方公司开用户&#xff0c;让其访问本地有限资源。 分两步&#xff0c;1新建服务器登录名&#xff0c;2设置数据库用户权限 1&#xff0c;首先用管理员sa登录数据库&#xff0c;在服务器级别下“安全性\登录名”&#…

搭建一个fastapi的项目,调用ollama服务

1. 项目结构 my_project/ │ ├── app/ │ ├── main.py # FastAPI应用的入口 │ ├── services/ # 包含服务逻辑 │ │ └── ollama_service.py │ ├── models/ # 定义数据模型 │ │ └── response.py │ ├─…

提升 PHP 编码效率的 10 个实用函数

PHP开发者始终追求更简洁、高效的代码。幸运的是&#xff0c;PHP 提供了丰富的内置函数&#xff0c;能显著减少手动编码&#xff0c;提升开发效率。无论经验深浅&#xff0c;掌握这些函数的使用技巧都至关重要。 以下列出了 10 个可以显著加快您的编码过程的 PHP 函数&#xf…

Opus Clip AI技术浅析(二):上传与预处理

1. 视频上传 1.1 用户接口 用户通过网页或移动应用上传视频文件。文件上传通常使用HTTP协议&#xff0c;支持多种视频格式&#xff08;如MP4, AVI, MOV等&#xff09;。上传接口需要处理大文件上传、断点续传等问题。 1.2 文件传输 上传的视频文件通过安全的传输协议&#…

二叉树层序遍历 Leetcode102.二叉树的层序遍历

二叉树的层序遍历相当于图论的广度优先搜索&#xff0c;用队列来实现 &#xff08;二叉树的递归遍历相当于图论的深度优先搜索&#xff09; 102.二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右…

Linux第一课:c语言 学习记录day06

四、数组 冒泡排序 两两比较&#xff0c;第 j 个和 j1 个比较 int a[5] {5, 4, 3, 2, 1}; 第一轮&#xff1a;i 0 n&#xff1a;n个数&#xff0c;比较 n-1-i 次 4 5 3 2 1 // 第一次比较 j 0 4 3 5 2 1 // 第二次比较 j 1 4 3 2 5 1 // 第三次比较 j 2 4 3 2 1 5 // …