antd-tree的半选回显,不联动父类节点,非严格模式下也可以

news2024/10/9 7:03:25

出现的问题,树节点在非严格模式下,如果回显,会自动选中父节点以下的所有节点

在这里插入图片描述

方案1 在请求回来前设置 check-strictly 为true,请求完成后,设置为 false,没生效

方案2 在请求回来回显的接口时,取没有children的项,进行设置回显,在切换选中时,将半选的也设置上

 <a-tree
      ref="aTreeRef"
       v-model:checkedKeys="checkedKeys" 
       default-expand-all 
       checkable 
       :field-names="fieldNames"
      :tree-data="treeData"
       @check="onCheck"
    />

回显

function findRoleMenuByRoleIdFn() {
  findRoleMenuByRoleId({
    roleId: props.editRoleObj.roleId,
  }).then((res: any) => {
    if (res.code === '0000') {
      checkedKeys.value = getOnlychildrenIds(res.data, [])
      menuIds.value = getAllAllIds(res.data, [])
    }
  })
}
// 半选的情况下,也传父节点
function onCheck(_keys: any, e: any) {
  const arr = _keys.concat(e.halfCheckedKeys)
  menuIds.value = [...arr]
};

function getAllAllIds(tree: any, result: any = []) {
  // 遍历树  获取id数组
  for (const i in tree) {
    result.push(tree[i].menuId) // 遍历项目满足条件后的操作
    if (tree[i].children) {
      // 存在子节点就递归
      getAllAllIds(tree[i].children, result)
    }
  }
  return result
}
// 回显的时候,默认值只取子项的id
function getOnlychildrenIds(tree: any, result: any = []) {
  // 遍历树  获取id数组
  for (const i in tree) {
    if (tree[i].children.length <= 0) {
      console.log(tree[i].menuId)
      result.push(tree[i].menuId) // 遍历项目满足条件后的操作
    }
    else {
      getOnlychildrenIds(tree[i].children, result)
    }
  }
  return result
}

取到的 menuIds就是最终选中的值,只是回显的时候,使用了另一个变量进行设置

在这里插入图片描述

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

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

相关文章

[C++ 核心编程]笔记 1 内存分区模型

内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区: 存放函数体的二进制代码&#xff0c;由操作系统进行管理的。 全局区: 存放全局变量和静态变量以及常量。 栈区: 由编译器自动分配释放&#xff0c;存放函数的参数值、局部变量等。 堆…

Linux 之 Linux应用编程概念、文件IO、标准IO

Linux应用编程概念、文件IO、标准IO 学习任务&#xff1a; 1、 学习Linux 应用开发概念&#xff0c;什么是系统调用&#xff0c;什么是库函数 2、 学习文件IO&#xff1a;包括 read、write、open、close、lseek 3、 深入文件IO&#xff1a;错误处理、exit 等 4、 学习标准IO&a…

wsl环境下安装Ubuntu,并下载MySQL5.7

安装操作需root权限&#xff0c;切换root用户有两种方式&#xff1a; 1-通过 sudo su - &#xff0c;切换到root用户&#xff08;登录后长期有效&#xff09;。 2-在每一个命令前加上sudo&#xff0c;临时提升权限&#xff08;仅对一条命令有效&#xff09;。 1、下载apt仓库…

【网络安全】利用XSS、OAuth配置错误实现token窃取及账户接管 (ATO)

未经许可,不得转载。 文章目录 正文正文 目标:target.com 在子域sub1.target.com上,我发现了一个XSS漏洞。由于针对该子域的漏洞悬赏较低,我希望通过此漏洞将攻击升级至app.target.com,因为该子域的悬赏更高。 分析认证机制后,我发现: sub1.target.com:使用基于Cook…

解决雪花ID在前端精度丢失问题

解决雪花ID在前端精度丢失问题 在现代分布式系统中&#xff0c;雪花算法&#xff08;Snowflake&#xff09;被广泛用于生成唯一的ID。这些ID通常是Long类型的整数。然而&#xff0c;当这些ID从后端传递到前端时&#xff0c;JavaScript的精度限制可能会导致精度丢失&#xff0c…

记录:Vscode 安装插件报:提取扩展出错 phpstudy中下载服务报网络异常

昨天出现了两个莫名其妙的问题&#xff1a; 一个是在phpstudy中下载服务的时候突然报了这个错误&#xff1a;当前网络不稳定&#xff0c;下载失败 不知道什么原因&#xff0c;从来也没见过 在网上找了一圈&#xff0c;没有解决&#xff0c;就放弃了 然后在刚刚&#xff0c;像用…

Photo Sphere Viewer:探索360°全景图的JavaScript库,轻松实现360°全景展示,探索360°全景世界的神奇之旅

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 你是否曾想过将360全景图嵌入到你的网站或应用中&#xff0c;为用户带来沉浸式的体验&#xff1f;Photo Sphere Viewer可以帮助你实现这个目标&#x…

打卡第六天 P10287 [GESP样题 七级] 最长不下降子序列

今天是我打卡第六天&#xff0c;做个普及/提高−题吧(#^.^#) 原题链接&#xff1a;[GESP样题 七级] 最长不下降子序列 - 洛谷 题目描述 输入格式 输出格式 输出一行一个整数表示答案。 输入输出样例 输入 #1 5 4 2 10 6 3 1 5 2 2 3 3 1 1 4 输出 #1 3 输入 #2 6 11 …

IvorySQL 西安站活动回顾|一键了解IvorySQL新兼容性

9月7日&#xff0c;IvorySQL社区携手中国开源软件联盟PostgreSQL分会&#xff0c;在古都西安成功举办PostgreSQL技术峰会及IvorySQL西安用户组成立仪式&#xff0c;现场吸引了众多西安PG圈技术爱好者和资深开发小伙伴们的热情参与&#xff01;&#x1f44f;&#x1f44f;&#…

计算机的错误计算(一百一十七)

摘要 算式“(5^25*(1/25)^(1/5)*3^25(1/25)^(1/5)*5^25*3^(251/5)-(9/25)^(1/5)*3^25*5^25-(1/25)^(1/5)*3^25*5.0^25*(13^(1/5)-3^(2/5.0)))” 的准确值是0. 但是&#xff0c;Python 与 Excel 均输出了错误结果&#xff1a;一个含有15位整数&#xff0c;一个含有14位整数。 …

HeidiSQL 数据库密码如何恢复

有时候我们会把数据库的连接密码保存在 HeidiSQL 中&#xff0c;但随着时间的流逝&#xff0c;我们可能希望重新找回保存在 HeidiSQL 中的密码&#xff0c;但 HeidiSQL 中保存的密码是无法被复制的。 这时候&#xff0c;我们需要想办法找到原始的密码。 加密算法 HeidiSQL 中…

多模态方法总结

多模态方法总结 架构分为Transformer Encoder的方法和基于Transformer Encoder和Decoder的方法 Transfomer Encoder方法 这张图来源于VILT&#xff0c;基本概括了多模态领域的模型架构。 图a是VSE或VSE的架构&#xff0c;文本端进行一个轻量的word embedding&#xff0c;视觉…

GNURadio 平台实现FM信号调制解调

一、FM 信号调制信号流图 波形图&#xff1a; 红色是已调制的FM信号&#xff0c;蓝色是调制信号波形。 频谱图&#xff1a; 瀑布图&#xff1a; 二、FM 信号解调信号流图 解调信号波形&#xff1a; 解调信号频谱&#xff1a; 具体可以通过audio sink 模块听音分析是否解调准确…

无人机高精度地形测量技术详解!

一、无人机技术 无人机作为搭载各种高精度传感器的平台&#xff0c;能够在不同高度和角度进行灵活飞行&#xff0c;覆盖各种复杂地形和环境&#xff0c;实现地表信息的全方位获取。 二、高精度传感器技术 GPS/GLONASS等卫星定位系统&#xff1a;无人机通过卫星定位系统实现高…

怎样查局域网里的所有ip?

如果想高效管理网络设备&#xff0c;识别配置、更新和维护各类连接设备&#xff0c;排查网络故障&#xff0c;提升网络安全性&#xff0c;监控异常 IP 活动&#xff0c;发现潜在威胁等需要知道局域网。那么怎样查局域网里的所有ip呢&#xff1f; 一、局域网IP是什么&#xff1…

最新免费GPT4O和Midjourney

一、什么是GPT4O&#xff1f; GPT-4 是 OpenAI 研发的大型语言模型。它具有强大的语言理解和生成能力&#xff0c;在自然语言处理等诸多领域有着广泛的应用和表现。 二、什么是Midjourney&#xff1f; Midjourney 是一款人工智能图像生成工具。它可以根据用户输入的描述或提…

LeetCode-2608. 图中的最短环【广度优先搜索 图,腾讯面试真题】

LeetCode-2608. 图中的最短环【广度优先搜索 图&#xff0c;腾讯面试真题】 题目描述&#xff1a;解题思路一&#xff1a;【一图秒懂】枚举起点跑 BFS解题思路二&#xff1a;背诵版解题思路三&#xff1a; 题目描述&#xff1a; 现有一个含 n 个顶点的 双向 图&#xff0c;每个…

anndata复制问题

感觉这个问题就很复杂哈&#xff0c;摸不清什么规律&#xff0c;只能判断前后的维度变化了 example 1 import scanpy as sc adata1 sc.read(/Users/yxkang/Desktop/dataset/HER2/H5AD_file/ad_H1.h5ad) print(adata1)adata2 sc.read(/Users/yxkang/Desktop/dataset/HER2/H5…

【AI学习】Mamba学习(五):《HiPPO: Recurrent Memory with Optimal Polynomial Projections》

SSM之后&#xff0c;就需要接着学习HiPPO了。 《HiPPO: Recurrent Memory with Optimal Polynomial Projections》 论文地址&#xff1a;https://arxiv.org/abs/2008.07669 摘要 从连续数据中学习的一个核心问题是&#xff0c;随着更多数据的处理&#xff0c;以增量方式表示累…

OWASP发布大模型安全风险与应对策略(QA测试重点关注)

开放式 Web 应用程序安全项目&#xff08;OWASP&#xff09;发布了关于大模型应用的安全风险&#xff0c;这些风险不仅包括传统的沙盒逃逸、代码执行和鉴权不当等安全风险&#xff0c;还涉及提示注入、对话数据泄露和数据投毒等人工智能特有的安全风险。 帮助开发者和测试同学更…