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

news/2024/7/10 2:18:59 标签: vue
需求功能:
编辑树节点,组装节点

在这里插入图片描述

<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.niftyadmin.cn/n/5084757.html

相关文章

一文了解什么是MTC认证和MTC证书用处和办理要求详细介绍

什么是MTC认证和MTC证书用处和办理要求详细介绍&#xff1f; ​从10月1日起&#xff0c;欧盟海关将严格检查所有申报HS代码为7323、7326等含有金属的货物。这一举措主要针对俄罗斯金属出口贸易的制裁&#xff0c;所有进口国家的金属相关产品必须提供MTC&#xff08;Material T…

代码随想录第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…

Android - Application

一、概念 1.1 生命周期 onCreate 在创建应用程序时调用。可以重写这个方法来实现实例化应用程序单态&#xff0c;以及创建和实例化任何程序状态变量和共享资源。 onLowMemory 当系统处于资源匮乏的时候&#xff0c;具有良好行为的应用程序可以释放额外的内存。这 个方法一般…

ios app开发环境搭建

Xcode是Apple iOS的应用市场app store移动应用的开发工具&#xff0c;支持不同设备、不同应用场景的开发&#xff0c;本文主要描述xcode开发工具开发环境的搭建。 如上所示&#xff0c;在macos中&#xff0c;使用app store安装xcode开发工具 如上所示&#xff0c;在macos中&…

新闻软文稿件媒体发布怎么做?纯干货

新闻软文稿件需要投放在正确的媒体上&#xff0c;才能获得更好的宣传推广效果&#xff0c;新闻软文稿件媒体发布怎么做&#xff1f;今天伯乐网络传媒就来给大家讲解一下&#xff0c;纯干货&#xff0c;建议收藏起来慢慢看。 一、媒体选择与分析 1. 确定目标媒体 在进行新闻软…

【专题】矩形和正方形的最大面积

一.矩形的最大面积——单调栈 &#xff08;1&#xff09;例题 P4147 玉蟾宫 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) &#xff08;2&#xff09;讲解&#xff08;摘自题解&#xff09; 问题转化&#xff1a; n行m列土地&#xff0c;求最大矩形面积&#xff0c;我们把…

【广州华锐互动】智轨列车AR互动教学系统

智轨列车&#xff0c;也被称为路面电车或拖电车&#xff0c;是一种公共交通工具&#xff0c;它在城市的街头巷尾提供了一种有效、环保的出行方式。智轨列车的概念已经存在了很长时间&#xff0c;但是随着科技的发展&#xff0c;我们现在可以更好地理解和欣赏它。通过使用增强现…

安防视频监控平台EasyCVR集成到ios系统不能播放是什么原因?如何解决?

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#…