element树形控件编辑节点组装节点

需求功能:
编辑树节点,组装节点

在这里插入图片描述

<el-scrollbar class="scrollbar-wrapper"><el-tree :data="nodeList" ref="tree" :props="defaultProps" :expand-on-click-node="false"><template slot-scope="{ node, data }"><div class="custom-tree-node"><template v-if="node.label"><span>{{node.label}} <span v-if="node.level==4 && false" style="padding-left:30px"><el-checkbox v-model="data.isCommon" true-label="Y" false-label="N">是否常用分类</el-checkbox></span></span><span style="margin-left:20px"><el-button size="small" type="text" @click.stop="appendNode(node,data)":disabled='node.level==4'>新增</el-button><el-button size="small" type="text" @click.stop="editNode(node,data)">编辑</el-button><el-button size="small" type="text" @click.stop="removeNode(node,data)">删除</el-button></span></template><template v-else="!node.investFormCodeText"><el-row :gutter="20" style="width:80%"><el-col :span="3"><div class="">编号:</div></el-col><el-col :span="6"><el-input v-model="data.investFormCode" size="small" placeholder="请输入编号"></el-input></el-col><el-col :span="3"><div class="">描述:</div></el-col><el-col :span="12"><el-input v-model="data.investFormCodeDesc" size="small" placeholder="请输入描述"></el-input></el-col></el-row><span style="margin-left:20px"><el-button size="small" @click="handleCancel(node,data)">取消</el-button><el-button size="small" type="primary" @click.stop="addChild(node,data)":disabled='node.level==4'>保存</el-button></span></template></div></template></el-tree></el-scrollbar>
data () {return {nodeList: [],defaultProps: {children: 'childList',label: 'investFormCodeText'},deleteList: [],}}
appendNode (node, data) {//为 Tree 中的一个节点追加一个子节点this.$refs.tree.append({dictKey: "marketQuotationInvestForm",investFormCodeText: '',childList: []}, node)},editNode (node, data) {this.$set(data, "tempInvestFormCodeText", data.investFormCodeText);this.$set(data, "investFormCodeText", "");},removeNode (node, data) {const parent = node.parent;const childList = parent.data.childList || parent.data;const index = childList.findIndex(d => d === data);if (data.id) {this.$confirm('删除配置项将影响历史数据,请确认是否删除?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {childList.splice(index, 1);this.deleteList.push({id: data.id});this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}else {childList.splice(index, 1);}},
// 数据结构
"nodeList": [{"investFormCodeText": "TF01 -- 搜索广告","investFormCode": "TF01","childList": null,"id": 14,"investFormCodeDesc": "搜索广告","parentId": 0},{"investFormCodeText": "TF02 -- 开屏","investFormCode": "TF02","childList": [{"investFormCodeText": "A001 -- 抖音-开屏","investFormCode": "A001","childList": [{"investFormCodeText": "B001 -- 优选互动","investFormCode": "B001","childList": null,"id": 17,"investFormCodeDesc": "优选互动","parentId": 16},{"investFormCodeText": "B002 -- 优选点击","investFormCode": "B002","childList": null,"id": 18,"investFormCodeDesc": "优选点击","parentId": 16},{"investFormCodeText": "B003 -- 超级优选","investFormCode": "B003","childList": null,"id": 19,"investFormCodeDesc": "超级优选","parentId": 16}],"id": 16,"investFormCodeDesc": "抖音-开屏","parentId": 15},{"investFormCodeText": "A002 -- 头条-开屏","investFormCode": "A002","childList": [{"investFormCodeText": "B001 -- 优选互动","investFormCode": "B001","childList": null,"id": 21,"investFormCodeDesc": "优选互动","parentId": 20},{"investFormCodeText": "B002 -- 优选点击","childList": null,"id": 22,"investFormCodeDesc": "优选点击","parentId": 20}],"id": 20,"investFormCodeDesc": "头条-开屏","parentId": 15}],

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

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

相关文章

Windows提权

1. MySQL提权 1.1 UDF提权 udf ‘user defined function’&#xff0c;即’用户自定义函数’。是通过添加新函数&#xff0c;对MYSQL的功能进行扩充 1、如何获得udf文件 2、将文件放到哪才能让mysql承认这个函数 3、函数功能 4、为什么这东西能提权(自定义函数指令是直接…

SQLAlchemy 使用封装实例

类封装 database.py #! /usr/bin/env python # -*- coding: utf-8 -*-import sys import json import logging from datetime import datetimefrom core.utils import classlock, parse_bool from core.config import (MYSQL_HOST,MYSQL_PORT,MYSQL_USER,MYSQL_PASS,MYSQL_DA…

微信小程序wxml使用过滤器

微信小程序wxml使用过滤器 1. 新建wxs2. 引用和使用 如何在微信小程序wxml使用过滤器&#xff1f; 犹如Angular使用pipe管道这样子方便&#xff0c;用的最多就是时间格式化。 下面是实现时间格式化的方法和步骤&#xff1a; 1. 新建wxs 插入代码&#xff1a; /*** 管道过滤工…

acwing算法基础之基础算法--求逆序对的数目

目录 1 知识点2 模板 1 知识点 合并两个有序数组&#xff0c;对于有序数组[l,mid]和有序数组[mid1,r]&#xff0c;将i指向前者&#xff0c;将j指向后者。在将每一个j插入最终有序数组中时&#xff0c;计算 s j m i d − i 1 s_jmid-i1 sj​mid−i1&#xff0c;此为(x,nums[j…

互动设计:深入了解用户体验的关键

交互是人与计算机系统之间的互动过程。在计算机领域中&#xff0c;交互是人机交互技术的核心内容之一。交互设计是一种基于人类行为科学、心理学、人体工程学等领域的专业设计&#xff0c;目的是创造用户友好的、易于使用的计算机软件、网络、移动应用等。交互的本质在于用户的…

Python使用pymysql来操作MySQL

Python使用pymysql来操作MySQL&#xff1a; # 使用python执行SQL # 1. 安装pymysql: pip install pymysql # 2. 创建到MySQL的数据库链接&#xff1a; from pymysql import Connection# 获取到MySQL数据亏的链接对象 conn Connection(hostlocalhost, # 主机名port3306, …

项目串讲(后端)要讲哪些东西?

刚进入一家公司&#xff0c;leader说给你几天时间&#xff0c;对咱们的公司的项目熟悉熟悉&#xff0c;做一个串讲吧。我很慌&#xff0c;没有串讲过&#xff0c;啥也不知道&#xff0c;不知道该怎么写&#xff0c;不知道讲出来leader满不满意&#xff0c;这些都是我在串讲前的…

SpringBoot 接口 字节数组直接显示为图片

源码&#xff1a; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; import org.springframework.web.bind.annotation.RequestMapping;/*** 获取二维码图像* 二维码支付** param price 金额* return 二维码图像* throws IOException IOException*/ Requ…

Android Native 开发 要点记录

Android Studio 中写 C 代码 android studio创建C项目_android studio native c-CSDN博客 项目配置参考 【CMake】CMakeLists.txt的超傻瓜手把手教程&#xff08;附实例源码&#xff09;_【cmake】cmakelists.txt的超傻瓜手把手教程(附实例源码)-CSDN博客 CMakeLists.txt 讲解…

NZ系列工具NZ05:VBA不打开工作簿获取其内容

我的教程一共九套及VBA汉英手册一部&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到数据库&#xff0c;到字典&#xff0c;到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑&#xff0c;这么多知识点该如何组织…

【C++】【自用】SLT 六大组件:容器

文章目录 &#x1f53a;&#x1f53a;&#x1f53a;1. map / set1.1 常见接口的使用1.2 经典问题operator[] 的返回值是什么&#xff1f;底层实现原理是什么&#xff1f;一个类型要做 map 和 set 的 K 有什么要求&#xff1f;map 和 set 有什么特点&#xff1f; 1.3 multi 版本…

stm32mp157中断简单应用

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭 按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响 按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 main.c #include "gpio.h" #include &…

leetcode 打家劫舍篇

198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

Transformer预测 | Pytorch实现基于Transformer的锂电池寿命预测(NASA数据集)

文章目录 效果一览文章概述模型描述程序设计参考资料效果一览 文章概述 Pytorch实现基于Transformer 的锂电池寿命预测,环境为pytorch 1.8.0,pandas 0.24.2 随着充放电次数的增加,锂电池的性能逐渐下降。电池的性能可以用容量来表示,故寿命预测 (RUL) 可以定义如下: SOH(t…

Vue2 修改了数组哪些方法,为什么

1、Vue2 修改了以下数组方法 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 这些方法都是可以改变原数组的。 为了实现数据响应式更新&#xff0c;Vue2 在这些方法中添加了特定的代码&#xff0c;以便通知 Vue 视图更新数据 举个例子&#xff0c;当我们…

Linux Shell 实现一键部署vmtools

VMware Tools 简介 VMware Tools 中包含一系列服务和模块&#xff0c;可在 VMware 产品中实现多种功能&#xff0c;从而使用户能够更好地管理客户机操作系统&#xff0c;以及与客户机操作系统进行无缝交互。 VMware Tools 具备以下功能&#xff1a; 将消息从主机操作系统传递…

代码随想录第42天 | ● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 // 一维数组空间优化 const maxProfit (prices) > {const n prices.lengthconst dp new Array(4).fill(0)dp[0] -prices[0]for (let i 1; i < n; i ) {const temp dp[0] // 缓存上一次的状态const temp1 dp[2]dp[0] Math.max(dp[0…

TCP/IP(十五)拥塞控制

一 拥塞控制 ① 拥塞控制必要性 思考&#xff1a; 为什么要有拥塞控制呀,不是有流量控制了吗&#xff1f; ② 拥赛窗口 cwnd 什么是拥塞窗口? 和发送窗口有什么关系呢?明白&#xff1a; cwnd、swnd、rwnd 缩写 含义 ③ 如何知道当前网络是否出现了拥塞呢&#xff1f;…

搞定ESD(三):ESD干扰耦合路径深入分析(一)

文章目录 一、外部测试环境引发的电场耦合1.1 静电枪枪体的电场耦合1.2 垂直耦合板与水平耦合板的电场耦合二、静电电流泄放路径中的电场耦合2.1 金属平面与敏感信号之间的电场耦合2.2 参考平面与敏感信号布线之间的电场耦合2.3 芯片散热片电场耦合分析2.3.1 散热片静电耦合机理…

如何看待为了省小钱而花费时间

相信每个人都会遇到这种情况&#xff1a;购买东西时想着货比三家或者想办法领优惠券、凑单等就可以省下一些钱&#xff0c;但是需要花费不少时间和精力。这时就开始犹豫了&#xff1a;省钱是必要的&#xff0c;需要居安思危&#xff0c;等到缺钱的时候不会后悔&#xff1b;又想…