树结构添加分组,向上向下添加同级,添加子级

树结构添加分组,向上向下添加同级,添加子级

  • 效果
  • 代码实现
    • 页面
    • js

效果

在这里插入图片描述

代码实现

页面

                <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false":filter-node-method="filterNode" :ref="'tree_' + item.name" :id="'tree' + item.name" node-key="id":current-node-key="defaultKeys" default-expand-all highlight-current @node-click="handleNodeClick"><span class="custom-tree-node" slot-scope="{ node, data }"><el-input :key="data.id" autofocus size="mini" class=" w-75 text-left" :id="data.id"v-show="data.isEdit" v-model="form.serviceName" @keyup.enter.native="addApiGroup" @blur="addApiGroup"></el-input><el-tooltip :content="node.label" placement="right-start" transition="el-zoom-in-top" effect="light"><span v-if="!data.isEdit" class="textLine1 tree-label d-flex align-items-center"><img class="imgAlign-textBottom mr-1":src="data.isGroup == 1 ? require('../../../assets/images/folder.png') : require('../../../assets/images/code.png')"alt=""><span class=''> {{ node.label }}</span></span></el-tooltip><el-popover v-if="data.isGroup == 1" placement="bottom-start" width="100" trigger="click"id="myPopover"><div><el-link class="ml-0 mb-2" :underline="false" size="mini" type="info"@click="handleAdd('api', node, data)"><img src="../../../assets/images/code_line.png" alt="" class="mr-2" />新增接口</el-link><el-popover placement="right-start" width="100" trigger="click"><el-link class="d-block ml-0  mb-2" :underline="false" size="mini" type="info"@click="handleAdd('group', node, data, 'up', $event)">上方添加分组</el-link><el-link class="d-block mb-2 ml-0" :underline="false" size="mini" type="info"@click="handleAdd('group', node, data, 'down')">下方添加分组</el-link><el-link class="d-block ml-0" :underline="false" size="mini" type="info"@click="handleAdd('group', node, data, 'child')">添加子分组</el-link><el-link class="ml-0 mb-2 addGroup" :underline="false" size="mini" type="info"slot="reference"><span><img src="../../../assets/images/bulletpoint.png" alt="" class="mr-2" />新增分组</span><img src="../../../assets/images/chevron-right.png" alt="" class="mr-2" /></el-link></el-popover><el-link class="d-block ml-0  mb-2" :underline="false" size="mini" type="info"@click="handleEdit('group', node, data)"><img src="../../../assets/images/folder_line.png"alt="" class="mr-2" />编辑分组</el-link><el-link class="d-block ml-0" :underline="false" size="mini" type="info"@click="handleDelete(node, data)"><img src="../../../assets/images/delete.png" alt=""class="mr-2" />删除</el-link></div><el-button class="ml-2" size="mini" icon="el-icon-more" type="text" slot="reference"></el-button></el-popover></span></el-tree>

js

export default {name: 'AppCenterDetail',components: { apiList },data() {return {treeData: [],defaultProps: {children: 'children',label: 'label',},}},created() {this.form.id = this.$route.query.appIdthis.appId = this.$route.query.appIdthis.getAppDetail(this.$route.query.appId)},mounted() {},methods: {// 节点单击事件handleNodeClick(data, node) {this.form.serviceName = data.labelthis.queryParams.parentId = data.idthis.defaultKeys = data.idlet tree = {id: 0,children: this.treeData};// 调接口提交addApiGroup() {},handleAdd(node, data, pageType){const treeDOM = this.$refs['tree_' + this.activeName][0]const id = Math.ceil(Math.random() * 100);const newData = { id: id, parentId: data ? data.id : 0, label: '', isEdit: true, isNew: true, children: [] }this.$set(this.form, 'isGroup', 1)if (pageType == 'up') {this.$set(this.form, 'upOrder', data.orderNum)this.$set(this.form, 'isUp', 0)this.$set(this.form, 'orderNum', data.orderNum - 1)this.$set(this.form, 'parentId', data ? data.parentId : 0)this.$set(this.form, 'upId', data.id)treeDOM.insertBefore(newData, node)// 聚焦setTimeout(() => {document.getElementById(newData.id).focus()}, 500);} else if (pageType == 'down') {this.$set(this.form, 'upOrder', data.orderNum)this.$set(this.form, 'isUp', 1)this.$set(this.form, 'orderNum', data.orderNum + 1)this.$set(this.form, 'parentId', data ? data.parentId : 0)this.$set(this.form, 'upId', data.id)treeDOM.insertAfter(newData, node)// 聚焦setTimeout(() => {document.getElementById(newData.id).focus()}, 500);} else if (pageType == 'child') {if (this.currentNodeLevel >= 4) {this.$modal.msgWarning('当前树最多可加四级,已超出')} else {this.$set(this.form, 'upOrder', data.orderNum)this.$set(this.form, 'isUp', 2)this.$set(this.form, 'parentId', data.id)treeDOM.append(newData, node)treeDOM.store.nodesMap[data.id].expanded = true// 聚焦setTimeout(() => {document.getElementById(newData.id).focus()}, 500);}} else {this.addGroupVisible = truethis.$set(this.form, 'parentId', 0)this.$set(this.form, 'isUp', 2)}},},
}

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

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

相关文章

IP-Guard日志数据上传至 SYSLOG 服务器操作指南

一、功能简介 服务器支持把日志数据上传到 SYSLOG 服务器。 二、功能配置 2.1 数据目录移交设置 在服务器安装目录下 OServer3.ini 文件中&#xff0c;添加工具启动配置&#xff0c;配置五分钟内生效。 Path&#xff1a;设置移交目录路径&#xff0c;IPG 服务器会把收集完成的…

六西格玛培训:控制图——洞察过程真相的利器

在追求卓越绩效与持续质量改进的征途中&#xff0c;六西格玛无疑是企业不可或缺的导航灯。作为一套严谨而系统的管理方法&#xff0c;六西格玛不仅帮助企业识别并减少过程中的变异与缺陷&#xff0c;还促进了流程的优化与创新。而在这套强大的方法论中&#xff0c;控制图作为核…

Java 日期时间

Java 提供了丰富的日期时间处理功能&#xff0c;主要集中在 java.time 包下。java.time 包是从 Java 8 开始引入的&#xff0c;设计用于解决旧的 java.util.Date 和 java.util.Calendar 类存在的问题&#xff0c;提供了更加清晰、易用和线程安全的 API。 ### 主要类和接口 1.…

【postgresql】角色(Role)

PostgreSQL 中&#xff0c;角色&#xff08;Role&#xff09;是一个重要的概念&#xff0c;用于管理数据库的访问权限和用户身份。角色可以被视为用户或组&#xff0c;具体取决于它们的配置方。 角色属性 角色可以具有多种属性&#xff1a; LOGIN&#xff1a;允许角色登录数据…

Flask包算法服务

常规包算法服务,就是比较简单,直接起一个fastapi就可以了。 import time import asyncio from aidraw import engineer_log as eng from fastapi import FastAPI from pydantic import BaseModel from typing import Optional from aidraw.ardraw import run_aidraw_api# 起…

Floyd算法——AcWing 343. 排序

目录 Floyd算法 定义 运用情况 注意事项 解题思路 基本步骤 AcWing 343. 排序 题目描述 运行代码 代码思路 改进思路 Floyd算法 定义 Floyd算法&#xff0c;全称Floyd-Warshall算法&#xff0c;是一种用于解决图中所有顶点对之间的最短路径问题的动态规划算法。…

一文读懂Java并发编程基础知识

什么是并发&#xff1f; 并发是指在某个时间段内&#xff0c;多任务交替处理的能力。比如说&#xff0c;你有一台单核心CPU电脑&#xff0c;注意必须是以单核心来理解下面的例子才是正确的。你可以利用电脑边听音乐&#xff0c;边写PPT&#xff0c;还能随时斗上一盘地主。这些…

基于java+springboot+vue实现的实验室管理系统(文末源码+Lw)127

基于SpringBootVue的实现的实验室管理系统&#xff08;源码数据库万字Lun文流程图ER图结构图演示视频软件包&#xff09; 系统功能&#xff1a; 实验室管理系统 管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;公告信息管理&#xff0c;知识库管理…

杭州高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

杭州高校大学智能制造数字孪生技术作为智能制造的重要支撑&#xff0c;通过构建虚拟世界的镜像&#xff0c;实现对物理世界的实时监控、预测和优化。杭州高校大学智能制造实验室数字孪生可视化系统平台建设项目&#xff0c;旨在通过引入先进的数字孪生技术&#xff0c;构建一个…

Log4j2原理及应用详解(四)

本系列文章简介&#xff1a; 在软件开发过程中&#xff0c;日志记录是一个不可或缺的重要环节。它不仅帮助开发者在开发阶段追踪和调试代码&#xff0c;还在软件运行阶段提供了宝贵的运行信息和错误追踪能力。随着软件系统的日益复杂&#xff0c;对日志记录的需求也变得越来越高…

鼠标的形状

鼠标的形状多样&#xff0c;主要取决于其设计、用途以及制造商的创意。一般来说&#xff0c;鼠标的基本形状包括以下几个部分&#xff1a; 主体部分&#xff1a; 大多数鼠标的主体部分呈流线型或稍微扁平的形状&#xff0c;以适应手掌握持。主体部分通常包含按键和滚轮&#x…

ESP32-S3多模态交互方案在线AI语音设备应用,启明云端乐鑫代理商

随着物联网&#xff08;IoT&#xff09;和人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;嵌入式设备正逐渐变得智能化&#xff0c;让我们的家庭生活变得更加智能化和个性化。 随着大型语言模型的不断进步和优化&#xff0c;AI语音机器人设备能够实现更加智能、…

自定义 Java ClassLoader:深入探索

在 Java 应用程序中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是实现动态加载类和资源的关键组件。默认情况下&#xff0c;Java 提供了一个类加载器层次结构&#xff0c;但有时我们需要自定义类加载器来满足特定的需求&#xff0c;比如加载加密的类文件、从数据…

mysql链接错误,unblock with ‘mysqladmin flush-hosts‘“

message from server: “Host ‘172.16.39.238’ is blocked because of many connection errors; unblock with ‘mysqladmin flush-hosts’”. 解决步骤&#xff1a; show global variables like ‘%max_connect_errors%’; set global max_connect_errors1000; flush host…

Springboot + JWT 的 Token 登录验证

目录 项目结构 一、 引入依赖 二、自定义Auth认证注解 三、 编写登录拦截器 四、定义跨域拦截器 五、 定义全局异常处理器 六、定义工具类 1. 统一错误状态码 2.统一响应类 3.Token工具类 七、 编写实体类 八、 定义控制器 1.定义登录控制器类 2 定义报错处理器 …

【单片机毕业设计选题24067】-基于STM32的智能衣控制系统

系统功能: 系统上电后OLED显示“欢迎使用智能衣服系统请稍后”两秒钟后进入正常页面显示&#xff0c; 第一行显示系统状态信息 第二行显示获取到体温值 第三行显示设定的高体温阈值和低体温阈值 第四行显示获取到心率和血氧值 短按B3按键调高心率设定高阈值 短按B4按键调…

每日一道算法题 994. 腐烂的橘子

题目 994. 腐烂的橘子 - 力扣&#xff08;LeetCode&#xff09; Python class Solution:def orangesRotting(self, grid: List[List[int]]) -> int:# 分类&#xff0c;挑好坏橘子m,nlen(grid),len(grid[0])have_goodFalserot_orange[]for r in range(m):for c in range(n…

浏览器渲染流程

渲染流水线 生成dom树 根据html生成dom树 生成cssom树 解析css生成一颗cssom树 document.styleSheets构建布局树-layout 根据dom树与cssom树构建一棵layout布局树,会移除不可见部分, 如display:none的dom, 但visible: hidden这种会保留 同时会计算可见部分的几何位置 划…

【学术会议征稿】2024年第三届信息学,网络与计算技术国际学术会议(ICINC2024)

2024年第三届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2024) 2024 3rd International Conference on Informatics,Networking and Computing (ICINC 2024) 2024年第三届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2024)将于2024年10月25-27日于中国郑州召…

Vue中使用mind-map实现在线思维导图

概述 在前面的文章Vue中实现在线画流程图实现中介绍了流程图的在线绘制&#xff0c;在本文&#xff0c;给大家分享一下基于mind-map实现在线的思维导图&#xff0c;并实现&#xff1a;1. 导图导出为图片&#xff1b;2. 打开xmind文件。 实现效果 实现 1. mind-map简介 simp…