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.rhkb.cn/news/330155.html

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

相关文章

树洞陪聊系统源码/陪聊/陪玩/树洞/陪陪/公众号开发/源码交付/树洞系统源码

独立版本源码交付&#xff0c;自研UI和前后端代码 平台自带店员&#xff0c;无需自主招募&#xff0c;搭建直接运营 支持三方登录&#xff0c;官方支付、虎皮椒、易支付/码支付 支持首单体验、盲盒订单、指定下单等多个模式 支持钱包预充值、店员收藏、订单评价等功能 支持…

什么样的数据摆渡设备,可以满足不同网间数据的安全传输需求?

数据摆渡设备是用来在不同的网络环境间安全地传输数据的硬件或软件解决方案。它们通常用于确保在具有不同安全级别的网络&#xff08;如内网和外网&#xff09;之间进行数据交换时的安全性和合规性。以下是一些常见的数据摆渡设备和方法&#xff1a; 移动介质拷贝&#xff1a;使…

Python模块、包和异常处理

大家好&#xff0c;在当今软件开发领域&#xff0c;Python作为一种简洁、易读且功能强大的编程语言&#xff0c;被广泛应用于各种领域。作为一名测试开发工程师&#xff0c;熟练掌握Python的模块、包和异常处理是提高代码可维护性和错误处理能力的关键。本文将和大家一起探讨Py…

第七节 ConfigurationClassParser 源码分析

tips&#xff1a; ConfigurationClassParser 是 Springframework 中的重要类。 本章主要是源码理解&#xff0c;有难度和深度&#xff0c;也枯燥乏味&#xff0c;可以根据实际情况选择阅读。 位置&#xff1a;org.springframework.context.annotation.ConfigurationClassPars…

Java方法的重载

Java方法的重载 前言一、为什么要有重载代码示例问题 代码示例 二、重载的使用代码示例 三、重载的规则针对同一个类代码示例 前言 推荐一个网站给想要了解或者学习人工智能知识的读者&#xff0c;这个网站里内容讲解通俗易懂且风趣幽默&#xff0c;对我帮助很大。我想与大家分…

HTML5好看的通用网站模板源码

文章目录 1.设计来源1.1 主界面1.2 模板菜单1 界面1.3 模板菜单2 界面1.4 模板菜单3 界面1.5 下拉菜单1 界面1.6 下拉菜单2 界面1.7 模板菜单4 界面1.8 模板菜单5 界面1.9 界面底部 2.效果和源码2.1 动态效果2.2 源码目录2.3 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址…

django-celery-beat自动调度异步任务

Celery是一个简单、灵活且可靠的分布式系统&#xff0c;专门用于处理大量消息的实时任务调度。它支持使用任务队列的方式在分布的机器、进程、线程上执行任务调度。Celery不仅支持异步任务&#xff08;如发送邮件、文件上传、图像处理等耗时操作&#xff09;&#xff0c;还支持…

深度学习之基于Tensorflow卷积神经网络(CNN)实现猫狗识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在人工智能和深度学习的热潮中&#xff0c;图像识别是一个备受关注的领域。猫狗识别作为图像识…

记录Python低代码开发框架zdppy_amcrud的开发过程

实现新增接口 基础代码 import env import mcrud import api import snowflakeenv.load(".env") db mcrud.new_env()table "user" columns ["name", "age"]async def add_user(req):data await api.req.get_json(req)values [d…

跟TED演讲学英文:Do schools kill creativity by Sir Ken Robinson

Do schools kill creativity? Link: https://www.ted.com/talks/sir_ken_robinson_do_schools_kill_creativity Speaker: Sir Ken Robinson Date: February 2006 文章目录 Do schools kill creativity?IntroductionVocabularySummaryTranscriptAfterword Introduction Sir…

[AI Google] 10个即将到来的Android生态系统更新

新的体验带来了更强的防盗保护、手表电池寿命优化&#xff0c;以及对电视、汽车等的娱乐功能改进。 昨天&#xff0c;我们分享了Android如何以人工智能为核心重新构想智能手机。今天&#xff0c;我们推出了Android 15的第二个测试版&#xff0c;并分享了更多我们改进操作系统的…

webSocket+Node+Js实现在线聊天(包含所有代码)

这篇文章主要介绍了如何使用 webSocket、Node 和 Js 实现在线聊天功能。 重要亮点 &#x1f4bb; 技术选型&#xff1a;使用 Node.js 搭建服务器&#xff0c;利用 Express 框架和 Socket.io 库实现 WebSocket 通信。 &#x1f4c4; 实现思路&#xff1a;通过建立数组存储聊天…

Linux 软件包管理器 yum的下载、功能介绍及使用

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 Linux下的三种软件安装方…

项目如何有效做资源管理?易趋项目管理软件让资源管理可视化

在项目管理的过程中&#xff0c;有效的资源管理能够确保资源得到合理的分配和使用&#xff0c;避免资源的浪费和冗余&#xff0c;进而提高整体工作效率、确保项目的成功&#xff1b;同时降低组织的运营成本。 但在项目推进过程中&#xff0c;项目经理总会面临各种资源管理的难…

MyBatis从入门到“入土“

&#x1f495;喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#xff01;&#x1f495;(●◡●) 目录 一、Mybatis为何物&#xff1f;&#x1f44c; 二、快速入门&#x1f923; 1、新建项目&#x1f60a; 2、数据库建表&#x1f60a; 3、导入依赖的jar包&#x1f60a;…

vue3 路由跳转 携带参数

实现功能&#xff1a;页面A 跳转到 页面B&#xff0c;携带参数 路由router.ts import { createRouter, createWebHistory } from "vue-router";const routes: RouteRecordRaw[] [{path: "/demo/a",name: "aa",component: () > import(&quo…

【软件设计师】2018年的上午题总结

2018 2018上半年2018下半年 2018上半年 1.小阶向大阶对齐 2.吞吐率是最长流水段操作时间的倒数 3.ssh的端口号是22 4.s所发送的信息使用s的私钥进行数字签名&#xff0c;t收到后使用s的公钥验证消息的真实性 5.数据流分析是被动攻击方式 6.《计算机软件保护条例》是国务院颁布…

226.翻转二叉树

翻转一棵二叉树。 思路&#xff1a; 指针做交换 用递归&#xff08;前序or后序&#xff0c;中序不行&#xff09; 前序&#xff1a;中左右 遍历到“中”的时候&#xff0c;交换它的左右孩子 然后分别对它的左孩子和右孩子使用“交换函数”&#xff08;定义的&#xff09;&a…

【论文阅读】使用深度学习及格子玻尔兹曼模拟对SEM图像表征粘土结构及其对储层的影响

文章目录 0、论文基本信息1、深度学习2、可运行程序—Matlab3、深度切片3、LBM模拟4、局限性 0、论文基本信息 论文标题&#xff1a;Characterizing clay textures and their impact on the reservoir using deep learning and Lattice-Boltzmann simulation applied to SEM i…

Python-温故知新

1快速打开.ipynb文件 安装好anaconda后&#xff0c;在需要打开notebook的文件夹中&#xff0c; shift键右键——打开powershell窗口——输入jupyter notebook 即可在该文件夹中打开notebook的页面&#xff1a; 2 快速查看函数用法 光标放在函数上——shift键tab 3...