element树形控件单选

需求功能:
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-nodenode-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-limitv-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.mzph.cn/news/101091.shtml

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

相关文章

stable diffusion艰难炼丹之路

文章目录 概要autoDL系统盘爆满autoDL python3.8切换python3.10dreambooth训练大模型完成后报错 概要 主要是通过autoDL服务器部署stable diffusion&#xff0c;通过dreambooth训练大模型。 问题&#xff1a; autoDL系统盘爆满autoDL python3.8切换python3.10dreambooth训练大…

什么是云计算?云计算简介

其实“云计算”作为一个名词而言&#xff0c;那是相当成功滴。很多人都有听过。但提及云计算”具体是什么?很多人&#xff0c;知其然&#xff0c;却不知其所以然! 利用软件将这些成千上万不可靠的硬件组织成一个稳定可靠的IT系统&#xff0c;以此支撑其公司的IT基础服务。这家…

基于SpringBoot的靓车汽车销售网站

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 车辆展示管理 车辆品牌管理 用户交流管理 购物车 用户交流 我的订单管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的…

vite vue3 pwa 更新提醒

效果 vite-plugin-pwa插件启用pwa后默认会在后台自动更新应用&#xff0c;并在关闭所有已开启的页面并重新打开后激活 通过此方法可以以消息方式提醒用户手动刷新激活更新应用 方法 已经使用vite-plugin-pwa插件启用pwa 修改vite.config.ts export default defineConfig(…

论文阅读——Large Selective Kernel Network for Remote Sensing Object Detection

目录 基本信息标题目前存在的问题改进网络结构另一个写的好的参考 基本信息 期刊CVPR年份2023论文地址https://arxiv.org/pdf/2303.09030.pdf代码地址https://github.com/zcablii/LSKNet 标题 遥感目标检测的大选择核网络 目前存在的问题 相对较少的工作考虑到强大的先验知…

python自动解析301、302重定向链接

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ python源码、视频教程、插件安装教程、资料我都准备好了&#xff0c;直接在文末名片自取就可 使用模块requ…

8 个 Promise 高级用法

在 js 项目中&#xff0c;promise 的使用应该是必不可少的&#xff0c;但我发现在同事和面试者中&#xff0c;很多中级或以上的前端都还停留在promiseInst.then()、promiseInst.catch()、Promise.all等常规用法&#xff0c;连async/await也只是知其然&#xff0c;而不知其所以然…

Rockchip平台 远程OTA服务搭建

Rockchip平台 远程OTA服务搭建 1. 概述 远程OTA升级服务是一种通过互联网远程更新Rockchip设备的固件和软件的方法。这种服务对于确保设备安全性、修复错误和添加新功能非常重要。 本文档将引导您完成在Rockchip平台上搭建远程OTA升级服务的过程。 在阅读本文的前&#xff…

Vue3新的状态管理库-Pinia(保姆级别教程)

目录 1.什么是Pinia2.为什么使用Pinia3.创建项目4.检查Pinia的安装版本5.main.js引入Pinia6.定义Store-组合式API写法(推荐)7.getters的实现8.action的异步实现9.storeToRefs 1.什么是Pinia Pinia是Vue的专属的最新状态管理库, 是Vuex状态管理工具的替代品 vue.js官网 https:…

L14D6内核模块编译方法

一、内核模块基础代码解析 一个内核模块代码错误仍然会导致的内核崩溃。 GPL协议&#xff1a;开源规定&#xff0c;使用内核一些函数需要 1、单内核的缺点 单内核扩展性差的缺点减小内核镜像文件体积&#xff0c;一定程度上节省内存资源提高开发效率不能彻底解决稳定性低的缺…

【新品发布】四核A53超高性价比!RK3562系列核心板及开发板震撼上市

RK3562系列产品采用 Rockchip 新一代 64 位处理器 RK3562&#xff08;Quad-core ARM Cortex-A53&#xff0c;主频最高 2.0GHz&#xff09;&#xff0c;最大支持 8GB 内存&#xff1b;内置独立的 NPU&#xff0c;可用于轻量级人工智能应用&#xff0c;RK3562 拥有 PCIE2.1 / USB…

图文验证码怎么测试及自动化测试怎么解决验证码问题?

前言 在对安全性有要求的软件&#xff08;系统&#xff09;中都存在验证码&#xff0c;那我们应该怎么进行测试呢&#xff0c;在自动化测试中又该怎么通过验证码使自动化顺利进行下去呢&#xff1f; 首先&#xff0c;来简单认识下验证码 测试验证码&#xff0c;首先我们应当…

Docker私有仓库打开2375端口(linux)

前言 在我们开发测试过程中&#xff0c;需要频繁的更新docker镜像&#xff0c;然而默认情况下&#xff0c;docker的2375端口是关闭的&#xff0c;下面介绍如何打开端口。 1、打开步骤 1.1、修改配置 登录docker所在服务器&#xff0c;修改docker.service文件 vi /usr/lib/sys…

如何正确高效使用墨西哥专线?

在当今全球化的物流行业中&#xff0c;跨境运输服务已经成为许多企业拓展国际市场的重要手段。然而&#xff0c;由于各国法律法规、文化差异以及运输环节的复杂性&#xff0c;企业在进行跨境运输时可能会遇到诸多挑战。为了解决这些问题&#xff0c;一些专业的物流公司推出了“…

SpringBoot Redis 基础使用

redis是一个key-value。和Memcached类似&#xff0c;它支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hash&#xff08;哈希类型&#xff09;。 Redis能做什么&#xff1a; 1. 缓存&#xff0c;毫无疑问这…

Centos中清除因程序异常终止,导致的残留的Cache/buff_drop_caches命令---linux工作笔记063

我这里因为nifi程序背压设置的不合理,导致,内存和CPU消耗过高,系统崩溃,但是重启NIFI以后,发现 对应的执行top命令,看到,系统的buff/cache 依然没有减少,说明内存被浪费了,残留在这里没有被回收. 用这个办法执行这个命令; linux会自动触发清理,但是只有在内存不够用的时候才会…

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

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

Mainflux IoT:Go语言轻量级开源物联网平台,支持HTTP、MQTT、WebSocket、CoAP协议

Mainflux是一个由法国的创业公司开发并维护的安全、可扩展的开源物联网平台&#xff0c;使用 Go语言开发、采用微服务的框架。Mainflux支持多种接入设备&#xff0c;包括设备、用户、APP&#xff1b;支持多种协议&#xff0c;包括HTTP、MQTT、WebSocket、CoAP&#xff0c;并支持…

Redis根据中心点坐标和半径筛选符合的数据

目录 1.启动Redis​编辑 2.导入maven依赖 3.添加redis配置 4.编写RedisService 5.使用 6.验证 1.启动Redis 2.导入maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifac…

pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』

前言 博主在开发前端网站的时候&#xff0c;发现随着开发的项目的逐渐增多&#xff0c;安装的依赖包越来越臃肿&#xff0c;依赖包的安装速度也是非常越来越慢&#xff0c;多项目开发管理也是比较麻烦。之前我就了解过 pnpm&#xff0c;但是当时担心更换包管理环境可能会出现的…