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天试用…

深入理解Nginx的Location模块

Nginx 是一个高性能的HTTP和反向代理服务器&#xff0c;其中的 location 模块用于根据请求的URI对请求进行路由。本文将详细介绍 Nginx 的 location 匹配规则、优先级&#xff0c;以及如何使用嵌套的 location 配置&#xff0c;并通过示例代码加以说明。 1. Location 基础 lo…

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

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

深入剖析:探究编程领域就业热点的地理分布

深入剖析&#xff1a;探究编程领域就业热点的地理分布 在数字化浪潮席卷全球的时代&#xff0c;编程技能无疑成为求职市场的热门标签。然而&#xff0c;对于编程爱好者而言&#xff0c;寻找最佳就业地点却成为一项颇具挑战性的任务。究竟什么地方编程最好找工作&#xff1f;本…

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

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

vue el-carousel走马灯实现显示多张(5张)和(7张)

vue el-carousel走马灯实现显示多张&#xff08;5张&#xff09;和&#xff08;7张&#xff09; 父组件不用修改&#xff0c;仅在子组件源码的基础上进行修改即可 直接上代码 <template><div><el-carousel v-if"typeitem5_xybjzq || typeitem5_qdbjzq&quo…

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…

C语言与内存息息相关的重要概念有哪些?

一、问题 C语⾔、C语⾔和C#语⾔&#xff0c;这三门语⾔&#xff0c;⼀个⽐⼀个加号&#xff08;&#xff09;多&#xff0c;C语⾔没有加号&#xff0c;C有两个加号&#xff0c;C#有四个加号。随着语⾔的发展&#xff0c;⼀个⽐⼀个简单&#xff0c;很多问题系统都给做了&#x…

关于Infinity在不同的编程语言中的含义

在不同的编程语言中&#xff0c;Infinity&#xff08;或等价的概念&#xff09;通常用来表示一个比任何有限数都要大的数值。它是浮点数类型的一个特殊值&#xff0c;用于表示当一个数超过了该类型能够表示的最大值时的情况。例如&#xff0c;在JavaScript、Python、Java、C#等…

双向带头链表实现

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

vue2 自定义ant design vue (组件) 的message内容 及 vue 定义公用方法流程

1 modules.js import { Button, message } from ant-design-vue; function downFile(){ alert(下载) } export default { // 成功提示 success(_this,content,size = 14) { // message.success({ // content : h => // _this.$createElement(span, [ // …

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…

安装Chrome扩展程序来 一键禁用页面上的所有动画和过渡。有那些扩展程序推荐一下

要安装Chrome扩展程序来一键禁用页面上的所有动画和过渡&#xff0c;以下是一些推荐的扩展程序&#xff1a; Toggle CSS Animations and Transitions 功能&#xff1a;此扩展程序允许用户轻松地在网页上切换CSS动画和过渡的开启与关闭状态。使用方法&#xff1a;安装后&#x…

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

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

ML307R OpenCPU UDP使用

一、UDP通信流程 二、示例 三、UDP通信代码 一、UDP通信流程 ML307R UDP 是使用LWIP的标准的通信,具体UDP流程可以自行百度 二、示例 实验目的:实现把接收的数据再发送到服务端 测试网址:UDP电脑端测试网址 因为是4G,所以必须用外网的 /* 测试前请先补充如下参数 */…

Flutter 中的 CupertinoTimePicker 小部件:全面指南

Flutter 中的 CupertinoTimePicker 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;CupertinoTimePicker 是 Cupertino 组件库中的一个 widget&#xff0c;它提供了一个 iOS 风格的时间和日期选择器。这个选择器允许用户通过滚动选择器来选择时间&#xff0c;非常适合需…