element树形控件单选

news2025/1/12 13:29:07
需求功能:
1,element树形控件单选
2,双击节点编辑

在这里插入图片描述

<div style="height: calc(100% - 48px)">
  <el-scrollbar class="scrollbar-wrapper">
    <el-tree :data="treesObj" show-checkbox default-expand-all check-strictly check-on-click-node
      node-key="subCode" ref="tree" highlight-current :props="defaultProps"
      @check-change="getCheckedNodes">
      <template slot-scope="{ node, data }" :ref="node.data.subCode">
        <span class="enumText" @dblclick.stop="editCateName(data, node)"
          v-if='!data.inputStatus'>{{ data.subCodeDesc }}</span>
        <el-input class="inputStyle" @blur="$event => editSave($event, data)" size="small" show-word-limit
          v-on:keyup.native.enter="$event.target.blur" placeholder="请输入" v-else="data.inputStatus"
          :ref="data.subCode" v-model.trim="cateNameInput"></el-input>
      </template>
    </el-tree>
  </el-scrollbar>
</div>
data() {
    return {
    	defaultProps: {
          children: 'subNodeList',
          label: 'subCodeDesc'
        },
        cateNameInput: '',//编辑节点值
        selectTreeNode:{],//选中节点
        treesObj:[{
		"highlight": null,
		"subCode": "1",
		"parentCode": null,
		"subNodeList": [{
			"highlight": null,
			"subCode": "11",
			"parentCode": "1",
			"subNodeList": [],
			"subCodeDesc": "子节点11"
		}],
		"subCodeDesc": "父节点1"
	},
	{
		"highlight": null,
		"subCode": "2",
		"parentCode": null,
		"subNodeList": [],
		"subCodeDesc": "父节点2"
	},
	{
		"highlight": null,
		"subCode": "3",
		"parentCode": null,
		"subNodeList": [],
		"subCodeDesc": "父节点3"
	}
],
    }
  },

获取当前选中节点,清空其他节点,再设置当前节点为选中状态

editCateName(data) {
    //双击节点的名称修改名称
      this.cateNameInput = data.subCodeDesc;
      this.treeIsEdit = data.subCode;
      this.$set(data, "inputStatus", true);
      this.$nextTick(() => {
        this.$refs[data.subCode] && this.$refs[data.subCode].focus(); // 获取输入框,自动获取焦点
      });
    };
async editSave(val, data) {
    //失去焦点之后执行的方法
      const inputName = val.target.value.trim();
      if (inputName == '') {
        this.$message({
          type: 'warning',
          message: '名称不能为空,请重新输入'
        });
        this.$set(data, "inputStatus", false); // 让文本span标签显示,输入框隐藏
        return;
      }
      if (inputName == data.subCodeDesc) {
        this.$set(data, "inputStatus", false);
        return;
      }
      this.$set(data, "inputStatus", false);
      let param = {
        groupType:"0103",//订单组
        costControlScope:this.costControlScope,
        code:data.subCode,
        codeDesc: inputName,
      };

      await this.$axios.post('/api/', param).then(res => {
        if (res.code === 200) {
          this.treedata.subCodeDesc = inputName;
          data.subCodeDesc = inputName;
          this.$message({
            type: 'success',
            message: '修改名称成功'
          });
        }
        // else {
        //   this.$message({
        //     type: 'warning',
        //     message: res.msg
        //   });
        // }
        this.getTrees();
      });
    };
getCheckedNodes(nodeData,nodeSelected){
	if (nodeSelected) {
        this.selectTreeNode = nodeData;
        this.$refs.tree.setCheckedKeys([]);//清空
        this.$refs.tree.setCheckedNodes([this.selectTreeNode])//设置
      }
      else{
        this.selectTreeNode={}
      }

}

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

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

相关文章

Springcloud笔记(1)-微服务和springcloud介绍

微服务简介 就是将一个大的应用&#xff0c;拆分成多个小的模块&#xff0c;每个模块都有自己的功能和职责&#xff0c;每个模块可以 进行交互&#xff0c;这就是微服务对于微服务&#xff0c;业界没有严格统一的定义&#xff0c;但是作为“微服务”这名词的发明人&#xff0c;…

水球展示——微信小程序

html <view class"water"><view class"text">完成率{{list.finish}}%</view><view class"img" style"height: {{list.finish}}%"><image src"../../image/water.jpg" mode"" />&l…

【使用 TensorFlow 2】01/3 中创建和训练自定义层

之前我们已经看到了如何创建自定义损失函数 接下来&#xff0c;我写了关于使用 Lambda 层创建自定义激活函数的文章 一、说明 TensorFlow 2发布已经接近2年时间&#xff0c;不仅继承了Keras快速上手和易于使用的特性&#xff0c;同时还扩展了原有Keras所不支持的分布式训练…

什么是物联网阀控水表?

物联网阀控水表是一种新型的水表&#xff0c;结合了物联网技术和传统水表的功能&#xff0c;可以实现对水的计量、控制和管理。随着人们对水资源的日益重视&#xff0c;物联网阀控水表的应用越来越广泛&#xff0c;为水资源的合理利用和管理提供了有效手段。 物联网阀控水表是由…

springboot json在线转换为实体类

json字符串映射到一个实体类。 这里有一个在线转换工具 http://www.bejson.com/json2javapojo/new/ 截图如下&#xff1a;

软件测试可以发现所有Bug吗,软件测评机构有哪些优势?

软件产品的质量要想得到保障&#xff0c;软件测试这项工作必不可少&#xff0c;主要是在测试过程中提前发现问题&#xff0c;用来促进鉴定软件的正确性、完整性、安全性和质量的过程。那软件测试可以发现所有bug吗?   我们要明确的是&#xff0c;软件测试是一项非常重要的工…

阿里云企业邮箱的替代方案有哪些?

"阿里云企业邮箱有哪些替代方案&#xff1f;替代方案有Zoho Mail、腾讯企业邮箱、网易企业邮箱、搜狐企业邮箱、新浪企业邮箱等。" 在中国的云计算市场中&#xff0c;阿里云企业邮箱无疑是一颗璀璨的明星。然而&#xff0c;市场上的需求多元化使得消费者在选择云服务…

el-select的el-option添加操作按钮插槽后实现勾选与按钮操作分离

这里我在el-option的选项文字后面添加了两个svg按钮&#xff08;编辑和删除&#xff09;&#xff1a;如图 当我们点击el-option时无法区分是勾选el-option还是点击了el-option选项文字后面的按钮&#xff0c;其实只要在后面的编辑和删除的操作按钮的click事件上面添加.native.…

速通Redis基础(三):掌握Redis的列表类型和命令

目录 Redis列表类型 Redis列表的基本命令 LPUSH LPUSHX RPUSH RPUSHX LRANGE LPOP RPOP LINDEX LINSERT LLEN 阻塞版本命令 BLPOP BRPOP Redis的列表命令小结 Redis是一种高性能、开源的NoSQL数据库&#xff0c;以其支持多种数据类型而闻名。在前两篇博客中&am…

【数据结构】线段树

算法提高课笔记 还未更新完 文章目录 原理pushupbuildmodifyquerypushdown&#xff08;懒标记 / 延迟标记&#xff09;扫描线法 原理 时间复杂度&#xff1a;O(logn) 线段树是一棵二叉树&#xff0c;把一段区间分成多个部分 类似堆的方式&#xff0c;用一维数组存整棵树 对…

远场Far-Field beamforming与近场Near-Field beamforming有何关系

这里写目录标题 UPA![在这里插入图片描述](https://img-blog.csdnimg.cn/170e1282d2d6424595263daf77707234.png)写在前面Channel Estimation for Extremely Large-Scale Massive MIMO:Far-Field, Near-Field, or Hybrid-Field?Far Field modelNear Field model UPA 写在前面…

Java内存空间(学习随笔)

1、程序运行中栈可能会出现两种错误 StackOverFlowError&#xff1a; 若栈的内存大小不允许动态扩展&#xff0c;那么当线程请求栈的深度超过当前 Java 虚拟机栈的最大深度的时候&#xff0c;就抛出 StackOverFlowError 错误。OutOfMemoryError&#xff1a; 如果栈的内存大小可…

音视频方法技术有哪些?H.265技术详解

H.265发展背景 H.264虽然是一个划时代的数字视频压缩标准&#xff0c;但是随着数字视频产业链的高速发展&#xff0c;H.264的局限性逐步显现&#xff0c;并且由于H.264标准核心压缩算法的完全固化&#xff0c;并不能够通过调整或扩充来更好地满足当前高清数字视频应用。 视频…

电子书制作软件Vellum mac中文版特点

Vellum mac是一款专业的电子书制作软件&#xff0c;它可以帮助用户将文本文件转换为高质量的电子书&#xff0c;支持多种格式&#xff0c;包括EPUB、MOBI、PDF等。Vellum具有直观的用户界面和易于使用的工具&#xff0c;可以让用户快速地创建和发布电子书。 Vellum mac软件特点…

基层医院信息管理系统源码 his系统全套成品源码带电子病历4级

基层医院his系统源码 二级医院信息管理系统源码&#xff0c;演示自主版权&#xff0c;云端SaaS服务 技术细节&#xff1a; 前端&#xff1a;AngularNginx 后台&#xff1a;JavaSpring&#xff0c;SpringBoot&#xff0c;SpringMVC&#xff0c;SpringSecurity&#xff0c;MyBa…

【MySQL】深入解析MySQL双写缓冲区

原创不易&#xff0c;注重版权。转载请注明原作者和原文链接 文章目录 为什么需要Doublewrite BufferDoublewrite Buffer原理Doublewrite Buffer和redo logDoublewrite Buffer相关参数总结 在数据库系统的世界中&#xff0c;保障数据的完整性和稳定性是至关重要的任务。为了实现…

web 基础和http 协议

一、域名 域名的概念 IP地址不易记忆&#xff0c;域名方便记住&#xff0c;以便于用户进行搜索访问 早期使用Hosts文件解析域名地址 缺点&#xff1a; ① 主机名称重复 ② 主机维护困难 DNS&#xff08;Domain Name System&#xff09;域名系统 ① 分布式 将一个大的数…

【AN-Animate教程——熟悉工作区】

【AN-Animate教程——熟悉工作区】 初始页面创建舞台主舞台界面其他常用板块 本篇内容&#xff1a;Animate用途 重点内容&#xff1a;熟悉工作区&#xff0c;以及基本操作 工 具&#xff1a;Adobe Animate 2022 初始页面 在初始页面当中&#xff0c;我们可以看到一个忍者和一个…

使用VS编译Redis源码报错

使用Redis源码版本,解压工程右键生成hiredis项目正常,编译Win32_Interop项目报下图错误(error C2039:system_error:不是std成员;error C3861: system_category:找不到标识符) 解决办法:在Win32_variadicFunctor.cpp和Win32_FDAPI.cpp添加 #include <system_error> ,再右键…

k8s 集群部署 kubesphere

一、最小化部署 kubesphere 1、在已有的 Kubernetes 集群上部署 KubeSphere&#xff0c;下载 YAML 文件: wget https://github.com/kubesphere/ks-installer/releases/download/v3.4.0/kubesphere-installer.yaml wget https://github.com/kubesphere/ks-installer/releases/…