【记录31】elementUI el-tree 虚线、右键、拖拽
父组件
<eltree :treeData="treeData"></eltree>
import eltree from "../../components/tree.vue";
export default {name: '',components: { // org_tree ,eltree},watch: {},data() {return {orgFormchoose: {},orgForm: { type: 0, limits: 1 },operateIndex: 1, // 默认 1 查看operateDisable: true,treeData: [{ parentId: null, id: 1, level: 1, type: null, checkbox: '1', allname: '组织机构1', name:'机构1简称', code:'机构1编码', show: true, children: [{ parentId: 1, id: 101, level: 2, type: null, checkbox: '2', allname: '组织机构1-1', show: false, },{ parentId: 1, id: 102, level: 2, type: null, checkbox: '3', allname: '组织机构1-2', show: false, },] },{ parentId: null, id: 2, level: 1, type: null, checkbox: '4', allname: '组织机构2', show: true, children: [{ parentId: 2, id: 201, level: 2, type: null, checkbox: '5', allname: '组织机构2-1', show: false, },{ parentId: 2, id: 202, level: 2, type: null, checkbox: '6', allname: '组织机构2-2', show: false, children: [{ parentId: 202, id: 2001, level: 3, type: null, checkbox: '7', allname: '组织机构2-1-1', show: false,children: [{ parentId: 2001, id: 20001, level: 3, type: null, checkbox: '8', allname: '8组织机构2-1-1', show: false, },{ parentId: 2001, id: 20002, level: 3, type: null, checkbox: '9', allname: '9组织机构2-2-2', show: false, },{ parentId: 2001, id: 20003, level: 3, type: null, checkbox: '11', allname: '11组织机构2-1-1', show: false, },{ parentId: 2001, id: 20004, level: 3, type: null, checkbox: '12', allname: '12组织机构2-2-2', show: false, },{ parentId: 2001, id: 20005, level: 3, type: null, checkbox: '13', allname: '13组织机构2-1-1', show: false, },] },{ parentId: 202, id: 2002, level: 3, type: null, checkbox: '10', allname: '组织机构2-2-2', show: false, },] },] },{ parentId: null, id: 3, level: 1, type: null, checkbox: '100', allname: '组织机构3', show: true, }],}},mounted() {},methods: {// 选择的节点信息ParentChooseOrgTree(_ulItem) {this.orgForm = _ulItem;},// 右击 删除ParentChooseDeleteOrgTree(_ulItem, _item) {this.operateIndex = _item.value;},// 组织机构点击操作//operateClick(_item, _index) {// console.log(_item.label, _index);// if (_index == 0 || _index == 2) {// this.operateDisable = false;// }else{// this.operateDisable = true;// }// this.operateIndex = _index;// if (_index === 3) {// this.$alert('','',{// confirmButtonText: '确定',// callback: action => {// if (action === 'confirm') {// this.$message.success('已悉知')// }// }// })// this.$alert('提醒:当前组织机构树存在下级节点,无法删除!<br/>提醒:请再次确认删除本级组织机构,删除后无法恢复!', '提示', {// confirmButtonText: '确定',// callback: action => {// if (action == "confirm") {// this.$message.success('已悉知')// }// }// });// }// }}
}
子组件
<template><div><el-treeclass="tree":indent="0"ref="tree":show-checkbox="true":data="data":props="defaultProps"node-key="checkbox"empty-text="暂无节点权限,联系管理员":default-expand-all="false":check-strictly="true":check-on-click-node="true":accordion="false":highlight-current="true"@node-contextmenu="nodeMenu"@node-drop="handleDrop"draggable:allow-drop="allowDrop"style="padding-left: 0px;"><span slot-scope="{ data }"><!-- <span slot-scope="{ node, data }"> --><span class="typecss">{{ data.level == 1?'局':data.level == 2?'司':data.level == 3?'项':data.level == 4?'隧': '' }}</span><span class="identy" :style="{ color: data.type == 1?'#2762e2':data.type == 0?'#36b636': '#999' }">{{ data.type == 1?'管':data.type == 0?'用': '' }}</span><span id="LABEL">{{ data.allname }}</span><!-- <span class="idty">{{ node.level == 1?'主':node.level == 2?'次':node.level == 3?'项':node.level == 4?'隧': '其' }}</span> --></span></el-tree><!-- --><div v-show="optionCardShow" id="right-menu" ref="container" :style="{top: optionCardY +'px', left: optionCardX +'px'}" @contextmenu.prevent="rightrightClick($event)"><span style="position:absolute; top:0px; right:0px; color:#333;border:1px solid #999; font-size:13px;" @click="optionCardShow=false"><i class="el-icon-close"></i></span><div style="margin-top:5px;"><div class="btu" v-for="(item, index) in btuList" :key="index" @click="BtuClick(item)"><span>{{ item.label }}</span></div><!-- <div class="btu"><span>查看本级机构</span></div><div class="btu"><span>修改本级机构</span></div><div class="btu" @click="BtuClick"><span>删除本级机构</span></div><div class="btu"><span>映射本级机构</span></div> --></div></div></div>
</template>
<script>export default {props: [ 'treeData'],data() {return {optionCardShow: false,optionCardY: 100, optionCardX: 100, postionStyle:{},data:this.treeData, // 父组件传值selectNode: {},rightoptionData: {},btuList: [{ label: '新增', value: 0 },{ label: '查看', value: 1 },{ label: '修改', value: 2 },{ label: '删除', value: 3 },{ label: '迁移', value: 4 }],btuUserList: [],defaultProps: {children: 'children',label: 'allname'}};},beforeDestroy() {window.removeEventListener('resize', this.handleResize);},mounted() {console.log(this.treeData);// this.data = this.treeData;window.addEventListener('resize', this.handleResize);},methods: {// handleDragStart(node, ev) { // 节点开始拖拽时触发的事件// console.log('节点开始拖拽时触发的事件 drag start', node, ev);// },// handleDragEnter(draggingNode, dropNode, ev) { // 拖拽进入其他节点时触发的事件// console.log('拖拽进入其他节点时触发的事件 tree drag enter: ',draggingNode, dropNode, ev);// },// handleDragLeave(draggingNode, dropNode, ev) { // 拖拽离开某个节点时触发的事件// if (draggingNode.data.parentId !== dropNode.data.parentId) {// alert('超出拖拽的节点范围,拖拽只能在同父节点下')// }// console.log('****************拖拽离开某个节点时触发的事件 tree drag leave: ',draggingNode, dropNode.label, ev);// },// handleDragOver(draggingNode, dropNode, ev) { // 在拖拽节点时触发的事件(类似浏览器的 mouseover 事件)// // if (condition) {// // }// console.log('在拖拽节点时触发的事件(类似浏览器的 mouseover 事件) tree drag over: ', draggingNode, dropNode.label, ev);// },// handleDragEnd(draggingNode, dropNode, dropType, ev) { // 拖拽结束时(可能未成功)触发的事件// console.log('拖拽结束时(可能未成功)触发的事件 tree drag end: ',draggingNode, dropNode && dropNode.label, dropType, ev);// },handleDrop(draggingNode, dropNode, dropType, ev) { // 拖拽成功完成时触发的事件this.getProjectVolumeTree(); // 拖拽成功 触发相应接口console.log('拖拽成功完成时触发的事件 tree drop: ',draggingNode, dropNode.label, dropType, ev);},allowDrop(draggingNode, dropNode, type) { // 拖拽时判定目标节点能否被放置console.log('拖拽时判定目标节点能否被放置 allowDrop', draggingNode, dropNode, type);if (draggingNode.data.level === dropNode.data.level) {if (draggingNode.data.parentId === dropNode.data.parentId) {return type === "prev" || type === "next";} else {return false;}} else {// 不同级进行处理return false;}},//tree拖拽成功完成时触发的事件 getProjectVolumeTree() {console.log('tree拖拽成功完成时触发的事件');},allowDrag(draggingNode) {console.log('8989', draggingNode.data.allname);// return draggingNode.data.label.indexOf('三级 3-2-2') === -1;return true;},// 单选handleNodeClick (data, checked, node) {console.log(data,'ppp');console.log( checked, 'll');console.log(node);if (checked) {this.$refs.tree.setCheckedNodes([data])this.selectNode = data;this.$parent.ParentChooseOrgTree(data);}},// 右击nodeMenu(e, data, n, t) {console.log(e, data, n,t, '右击');this.optionCardShow = falsethis.optionCardX = e.x // 让右键菜单出现在鼠标右键的位置this.optionCardY = e.ythis.$parent.ParentChooseOrgTree(data);this.rightoptionData = data// this.node = n // 将当前节点保存this.optionCardShow = true // 展示右键菜单},rightMenuClose(event) {let dom = document.getElementById('right-menu')if (dom) {if (!dom.contains(event.target)) {//点击到了id为right-menu以外的区域,就隐藏菜单this.optionCardShow = false}}},// 右击demo事件BtuClick(_item) {console.log(_item);switch (_item.value) {case 0:this.$message.warning(_item.label)break;case 1:this.$message.warning(_item.label)break;case 2:this.$message.warning(_item.label)break;case 3: //删除事件this.$parent.ParentChooseDeleteOrgTree(this.selectNode, _item); // 父组件事件,在这里是子组件调用父组件函数this.$message.warning(_item.label)break;case 4:this.$message.warning(_item.label)break;default:break;}},//rightrightClick(event) {event.preventDefault();},}};
</script>
在这里插入代码片
相关文章:
【记录31】elementUI el-tree 虚线、右键、拖拽
父组件 <eltree :treeData"treeData"></eltree>import eltree from "../../components/tree.vue"; export default {name: ,components: { // org_tree ,eltree},watch: {},data() {return {orgFormchoose: {},orgForm: { type: 0, limits: 1…...
【C++】函数重载
🦄个人主页:修修修也 🎏所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 📌函数重载的定义 📌函数重载的三种类型 🎏参数个数不同 🎏参数类型不同 🎏参数类型顺序不同 📌重载…...
【深度学习模型】6_3 语言模型数据集
注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 6.3 语言模型数据集(周杰伦专辑歌词) 本节将介绍如何预处理一个语言模型数据集,并将其转换成字符级…...
技术选型思考:分库分表和分布式DB(TiDB/OceanBase) 的权衡与抉择
码到三十五 : 个人主页 心中有诗画,指尖舞代码,目光览世界,步履越千山,人间尽值得 ! 在当今数据爆炸的时代,数据库作为存储和管理数据的核心组件,其性能和扩展性成为了企业关注的重点。随着业…...
React改变数据【案例】
State传统方式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>React Demo</title> <!--…...
ChatGPT Plus 自动扣费失败,如何续订
ChatGPT Plus 自动扣费失败,如何续订 如果您的 ChatGPT Plus 订阅过期或扣费失败,本教程将指导您如何重新订阅。 本周更新 ChatGPT Plus 是一种每月20美元的订阅服务。扣费会自动进行,如果您的账户余额不足,OpenAI 将在一次扣费…...
Rust: Channel 代码示例
在 Rust 中,通道(Channel)通常使用 std::sync::mpsc(多生产者单消费者)或 tokio::sync::mpsc(在异步编程中,特别是使用 Tokio 运行时)来创建。下面是一个使用 std::sync::mpsc 的简单…...
基于华为atlas的unet分割模型探索
Unet模型使用官方基于kaggle Carvana Image Masking Challenge数据集训练的模型。 模型输入为572*572*3,输出为572*572*2。分割目标分别为,0:背景,1:汽车。 Pytorch的pth模型转化onnx模型: import torchf…...
机器学习--循环神经网络(RNN)1
一、简介 循环神经网络(Recurrent Neural Network)是深度学习领域中一种非常经典的网络结构,在现实生活中有着广泛的应用。以槽填充(slot filling)为例,如下图所示,假设订票系统听到用户说&…...
基于java+springboot+vue实现的学生信息管理系统(文末源码+Lw+ppt)23-54
摘 要 人类现已进入21世纪,科技日新月异,经济、信息等方面都取得了长足的进步,特别是信息网络技术的飞速发展,对政治、经济、军事、文化等方面都产生了很大的影响。 利用计算机网络的便利,开发一套基于java的大学生…...
【漏洞复现】Linksys E2000 position.js 身份验证绕过漏洞(CVE-2024-27497)
0x01 产品简介 Linksys E2000是一款由思科(Cisco)品牌推出的无线路由器,它是一款支持2.4GHz和5GHz双频段的无线路由器,用户可以避开拥挤的2.4GHz频段,独自享受5GHz频段的高速无线生活。 0x02 漏洞概述 Linksys E200…...
小白跟做江科大51单片机之DS1302可调时钟
原理部分 1.DS1302可调时钟介绍 单片机定时器主要占用CPU时间,掉电不能继续运行 图1 2.原理 图2 内部有寄存器,寄存的时候以时分秒寄存,以通信协议实现数据交互,就可以实现对数据进行访问和读写 3.主要寄存器定义 CE芯片使能…...
2024蓝桥杯每日一题(归并排序)
一、第一题:火柴排队 解题思路:归并排序 重点在于想清楚是对哪个数组进行归并排序求逆序对 【Python程序代码】 from math import * n int(input()) a list(map(int,input().split())) b list(map(int,input().split())) na,nb [],[] for …...
生成对抗网络 (GAN)
生成对抗网络(Generative Adversarial Networks,GAN)是由Ian Goodfellow等人在2014年提出的一种深度学习模型。GAN由两部分组成:一个生成器(Generator)和一个判别器(Discriminator)&…...
QGridLayout网格布局和QVBoxLayout垂直布局有着非常大的差别
QGridLayout网格布局:1.把这块控件划分成一个个的 单元格 2.把你的控件填充进入 单元格 3.这些有关限制大小的函数接口统统失效 setMaximumWidth() setMinimumWidth() setPolicySize()图示:我是用的网格布局,左边放QT…...
HCIA-HarmonyOS设备开发认证V2.0-习题2
目录 习题一习题二坚持就有收获 习题一 # 判断题## 1.PWM占空比指的是低电平时间占周期时间的百分比。(错误)正确(True)错误(False)解题: - PWM占空比指的是高电平时间占周期时间的百分比## 2.UART是通用异步收发传输器,是通用串行数据总线,…...
【npm】前端工程项目配置文件package.json详解
简言 详细介绍了package.json中每个字段的作用。 package.json 本文档将为您介绍 package.json 文件的所有要求。它必须是实际的 JSON,而不仅仅是 JavaScript 对象文字。 如果你要发布你的项目,这是一个特别重要的文件,其中name和version是…...
Python快速入门系列-2(Python的安装与环境设置)
第二章:Python的安装与环境设置 2.1 Python的下载与安装2.1.1 访问Python官网2.1.2 安装Python对于Windows用户对于macOS用户对于Linux用户 2.2 集成开发环境(IDE)的选择与设置2.2.1 PyCharm2.2.2 Visual Studio Code2.2.3 Jupyter Notebook2…...
Linux的环境安装以及项目部署
LInux软件安装 是在发行版是CentOS下安装 通常使用yum安装,可以在rpm上增加了自动解决依赖的功能 传输安装包方式安装JDK与tomcat 安装JDK ●安装包:将.gz文件通过Xftp传输到/opt目录下准备安装 ●解压:进入/opt目录,使用命令tar -zxvf 压缩包名称 (名称…...
ASUS华硕天选2锐龙版笔记本电脑FA506ICB/FA706IC原装出厂Windows11系统,预装OEM系统恢复安装开箱状态
链接:https://pan.baidu.com/s/122iHHEOtNUu4azhVPnxNuA?pwdsqk7 提取码:sqk7 适用型号: FA506IM、FA506IE、FA506IC、FA506IHR FA506IR、FA506IHRB、FA506ICB、FA506IEB FA706IM、FA706IE、FA706IC、FA706IHR FA706IR、FA706IHRB、F…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
DiscuzX3.5发帖json api
参考文章:PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下,适配我自己的需求 有一个站点存在多个采集站,我想通过主站拿标题,采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...
