当前位置: 首页 > news >正文

React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。

代码样例如下:

1.TreeSelect标签部分

  render() {const {codeselect} = this.props;const {treeExpandedKeys} = this.state
................<TreeSelectshowSearch={false}dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}treeExpandedKeys={treeExpandedKeys}onTreeExpand={(data) => {this.setState({treeExpandedKeys:[...(data || [])]})}}treeData={codeselect.managecomTreeData}allowClearplaceholder={formatMessage({ id: 'global.input.placeholder' }) +formatMessage({ id: 'TrainPlanManage.company' })}/>

其中,实现了treeExpandedKeysonTreeExpand方法。
(1) treeExpandedKeys方法,是要展开的key数组;
(2) onTreeExpand,是点击展开按钮时的操作,需要把点击元素的key放入数组中,就会展开了。

2.js代码部分

class MyPage extends PureComponent {state = {treeExpandedKeys:[]}
  componentDidMount(){const {codeselect} = this.props;// 只展开第一层this.setState({treeExpandedKeys:[codeselect.managecomTreeData[0].key]})}

(1) 先在state里声明了一个数组,就是用来保存要展开的元素的key的数组
(2) 当页面初始化后,会选取数据中的第0个元素的key,放入要展开的数组中,这样页面就会默认展开数据中的第0个元素。

(注意,后端返回的数据list中,需要有key字段,否则不好实现)

样例图如下,默认展开【1】:
在这里插入图片描述

3.备注

Tree标签设置默认展开数据,用的是expandedKeysonExpand

相关文章:

React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。 代码样例如下&#xff1a; 1.TreeSelect标签部分 render() {const {codeselect} this.props;const {treeExpandedKeys} this.state ................<TreeSelectshowSearch{false}dropdownStyle{{ maxHei…...

Golang基础学习笔记

Golang基础学习笔记 1、下载安装 1.1、下载 Golang下载地址&#xff1a;https://golang.google.cn/dl/ 1.2、安装 1.3、环境变量 # GOPATH D:\GolandProjects# GOPROXY https://mirrors.aliyun.com/goproxy# 启用Go模块支持 go env -w GO111MODULEon1.5、验证安装/配置 1.…...

ES _bulk 批量操作用法

es 的 bulk 操作&#xff0c;是用来批量发送请求&#xff0c;或者理解为批量操作的。 支持4种操作 bulk 支持多种操作&#xff0c;如下create、index、update、delete。 create 如果文档不存在就创建&#xff0c;但如果文档存在就返回错误index 如果文档不存在就创建&#x…...

LCR 176.判断是否为平衡二叉树

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;LCR 176. 判断是否为平衡二叉树 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 若树中任意节点左子树是平衡二叉树&#xff0c;右子树是平衡二叉树 且该节点左右子树平衡&#xff0c;则该树…...

跨境商城源码有哪些独特的功能和优势

1. 强大的跨境支付功能 跨境商城源码具备强大的跨境支付功能&#xff0c;支持多种支付方式&#xff0c;包括信用卡、支付宝、微信支付等。该功能遵循国际支付标准&#xff0c;能够确保支付过程的安全性和可靠性&#xff0c;为用户提供便捷的跨境购物体验。 2. 多语言和多货币支…...

latex如何对.pdf格式的图片实现裁剪

目录 问题描述&#xff1a; 问题解决&#xff1a; 问题描述&#xff1a; 在使用draw.io进行绘图&#xff0c;导出的时候不知道为什么周围会有留白&#xff0c;比如下图&#xff1a; 在导入latex的时候&#xff0c;会因为两侧的留白导致整张图片缩小。 如果直接进行裁剪.pdf&a…...

windows10下 iperf3测试带宽

iperf3下载网址&#xff1a;iPerf - Download iPerf3 and original iPerf pre-compiled binaries 可以用来测试TCP以及UDP带宽质量 通俗来说是用来测试网速的 准备&#xff1a;两台设备 1. 根据自己的设备选择下载工具&#xff08;两台都要有&#xff0c;这里我用的Window…...

Stratasys F170 3D打印教程

目录 0. 引言1. 3D打印技术1.1 3D 打印概述1.2 3D打印成型技术的工艺1.3 3D打印材料2. Stratasys F170 3D打印机2.1 Stratasys F170 特点及使用说明3. 打印步骤3.1 导出加工模型3.2 导入模型到GrabCAD Print3.2.1 GrabCAD Print 基本操作步骤4. 常见问题及解决方案参考文献0. 引…...

以太坊 CALL 数据解析【ETH】

文章目录 前言代码前言 当我们通过 jsonrpc CALL 获取到数据时,不可读,怎么办? 这里直接给大家一个工具类 代码 package trace// author JavaPub shiyuwangimport ("encoding/json""fmt""io/ioutil""net/http""strings&qu…...

Xilinx IP 10G Ethernet PCS/PMA IP Core

Vivado 10G Ethernet PCS/PMA介绍 1介绍 完整的10G以太网接口如下图,分为10G PHY和10G MAC两部分。 这篇文章重点讲 10G Ethernet PCS/PMA。 2 IP的基本介绍 10G以太网物理编码子层/物理介质连接(PCS/PMA)核心在Xilinx 10G以太网介质访问控制器(MAC)核心和具有10Gb/s…...

软件设计师_面向对象_学习笔记

文章目录 1 面向对象基本概念2 设计模式3 UML4 设计模式4.1 设计模式的基本概念4.2 设计模式的分类4.3 创建型模式 1 面向对象基本概念 2 设计模式 3 UML 4 设计模式 4.1 设计模式的基本概念 模式&#xff1a;通俗的来说就是成功方案的复用。 架构模式从全局看待问题。设计模式…...

行业追踪,2023-10-16

自动复盘 2023-10-16 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

ubuntu深度学习配置

1.删除旧cuca&#xff0c;旧显卡驱动 sudo apt-get --purge remove "*cublas*" "*cufft*" "*curand*" "*cusolver*" "*cusparse*" "*npp*" "*nvjpeg*" "cuda*" "nsight*" sudo…...

大数据flink篇之三-flink运行环境安装后续一yarn-session安装

前提&#xff1a; Hadoop 必須保证在 2.2 以上&#xff0c;且必須裝有 hdfs 服务。Hadoop安装后续会有相关说明。 具体的&#xff0c;在生产环境中&#xff0c;flink一般会交由yarn、k8s等资源管理平台来处理。本章主要讲解yarn模式下的session cluster模式。 flink Session-C…...

Chrome Extensions v3 迁移清单

一、前置问题 1.1为什么需要迁移 v3&#xff1f; Chrome 计划完全停止 v2 版本维护&#xff0c;后续 v2 版本将无法上架谷歌插件商店&#xff0c;除此之外&#xff0c;未来新版本 Chrome 对于 v2 版本插件的限制会越来越大&#xff0c;比如安全性限制 iframe 嵌套只能通过沙盒…...

TCP/IP(十二)TCP的确认、超时、重传机制

一 TCP的确认应答机制 确认应答机制: 每次收到数据 都会 给对端发送一个应答报文(ACK) ① 带重传的肯定确认 确认机制: 超时 重传的 肯定 确认 --> 完成了两个作用,或者说有两个含义1、肯定[正确] 确认小结&#xff1a; 我的确认信息是针对正确数据做确认,而不是错误…...

C/C++陷阱——临时变量的产生和特性

C/C陷阱——临时变量的产生和特性 在学习C常引用时&#xff0c;有这样一段代码引起了我的注意&#xff1a; int a 1; double& b a;当我编译这段代码时&#xff0c;竟然报错了&#xff1a; 按理来说&#xff0c;初始化引用时不能涉及权限的放大&#xff08;如用const in…...

【音视频|ALSA】SS528开发板编译Linux内核ALSA驱动、移植alsa-lib、采集与播放usb耳机声音

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储)

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储) 程序之美 前言 很多时候,特别是刚步入大学的学子们,对于刚刚开展的计算机课程基本上是一团迷雾,想要弄明白其中的奥秘,真的要花费一些功夫,我和大家一样都是这么啃过来的,从不知到知知,懵懂到入门,每一步…...

【ROS】使用vscode浏览navigation2源码时,提示:没有那个文件或目录

【ROS】郭老二博文之:ROS目录 1、问题描述 使用vscode浏览navigation2源码时,头文件下面有波浪线,并提示:没有那个文件或目录。比如没有:geometry_msgs/msg/polygon.h 错误信息: 无法打开源文件 “geometry_msgs/msg/polygon.h” (dependency of “nav2_controller/co…...

OpCore Simplify:智能高效的OpenCore EFI配置工具技术指南

OpCore Simplify&#xff1a;智能高效的OpenCore EFI配置工具技术指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore Simplify是一款专为简化…...

Harmonyos应用实例225: 数学建模案例分析

7. 数学建模案例分析 功能简介:提供常见数学建模案例,如人口增长模型、传染病模型、经济增长模型等,通过参数调整观察模型变化,计算模型预测值。帮助学生理解数学建模的基本步骤和应用价值。 ArkTS代码: @Entry @Component struct MathematicalModeling {@State privat…...

告别重复造轮子:用快马AI一键生成esp8266连接阿里云IoT的高效代码模块

最近在做一个智能家居项目&#xff0c;需要用esp8266连接阿里云IoT平台。作为一个经常和物联网设备打交道的开发者&#xff0c;我发现每次新项目都要重复写类似的连接代码&#xff0c;既浪费时间又容易出错。这次尝试用InsCode(快马)平台的AI辅助生成代码模块&#xff0c;效率提…...

STM32开发必备:用CmBacktrace一键定位HardFault死机问题(附Keil配置指南)

STM32开发实战&#xff1a;用CmBacktrace精准捕获HardFault的终极指南 当你的STM32程序突然陷入HardFault死循环时&#xff0c;是否经历过这样的绝望时刻&#xff1f;仿真器连上又断开&#xff0c;寄存器值看了又看&#xff0c;函数调用栈却始终是个谜。今天&#xff0c;我将带…...

复古玩法:OpenClaw+Qwen3.5-9B模拟操作Windows 98怀旧游戏

复古玩法&#xff1a;OpenClawQwen3.5-9B模拟操作Windows 98怀旧游戏 1. 为什么选择Windows 98游戏作为测试场景 最近在整理旧硬盘时&#xff0c;偶然发现了一批Windows 98时代的经典游戏安装包。这些20年前的老游戏不仅界面风格复古&#xff0c;操作方式也与现代软件大相径庭…...

声学模拟实战:用Python实现格林函数计算声场分布(附完整代码)

声学模拟实战&#xff1a;用Python实现格林函数计算声场分布&#xff08;附完整代码&#xff09; 在噪声控制、建筑声学和工业设备设计中&#xff0c;声场模拟技术正成为工程师的必备技能。传统商业软件虽然功能强大&#xff0c;但往往价格昂贵且难以定制化。本文将带您用Pyth…...

仅限产线工程师获取:Python网关调试禁忌清单(含12个厂商文档刻意回避的硬件层坑点,第7条致90%项目延期)

第一章&#xff1a;Python网关调试的产线准入机制与权限边界在工业级Python网关部署场景中&#xff0c;产线准入并非简单验证服务可达性&#xff0c;而是融合身份认证、环境隔离、行为审计与动态策略执行的多维控制体系。所有调试接入请求必须通过统一API网关前置鉴权模块&…...

从一次“意外”发现flag说起:复盘uWSGI目录穿越漏洞(CVE-2018-7490)排查中的常见思维盲区

从"Not Found"到flag&#xff1a;uWSGI目录穿越漏洞实战思维全解析 当浏览器返回"Not Found"时&#xff0c;大多数人的第一反应是漏洞利用失败。但真正的安全测试往往始于这些看似失败的瞬间。去年在内部红队演练中&#xff0c;我遇到一个经典场景&#x…...

避坑指南:Ubuntu 22.04安装PyTorch时,关于CUDA版本和驱动那些最容易踩的雷

避坑指南&#xff1a;Ubuntu 22.04安装PyTorch时&#xff0c;关于CUDA版本和驱动那些最容易踩的雷 如果你正在Ubuntu 22.04上搭建PyTorch开发环境&#xff0c;很可能已经遇到了几个令人困惑的问题&#xff1a;为什么nvidia-smi和nvcc -V显示的CUDA版本不一致&#xff1f;为什么…...

BilibiliDown全场景应用指南:从基础下载到高级定制的完整方案

BilibiliDown全场景应用指南&#xff1a;从基础下载到高级定制的完整方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mi…...