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

news2024/12/23 5:23:54

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

代码样例如下:

1.TreeSelect标签部分

  render() {
      const {
      codeselect
    } = this.props;
    const {treeExpandedKeys} = this.state
................

  <TreeSelect
  showSearch={false}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  treeExpandedKeys={treeExpandedKeys}
  onTreeExpand={(data) => {
    this.setState({treeExpandedKeys:[...(data || [])]})
  }}
  treeData={codeselect.managecomTreeData}
  allowClear
  placeholder={
    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

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

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

相关文章

day06_面向对象基础

今日内容 1 复习 2 面向对象编程介绍 3 面向对象 类,属性,方法 ,创建对象,使用对象内存关系 一、复习 周一: jdk,配置环境变量,idea,HelloWorld 变量,基本数据类型 周二: 运算符,if,if-else 周三: if-elseif-elseif-else,循环(while,dowhile,for) 周四: 方法设计(参数,返回值),…

vue3学习(六)--- 插槽slot

文章目录 匿名插槽具名插槽作用域插槽渲染作用域 动态插槽 插槽就是&#xff1a;子组件中的提供给父组件使用的一个占位符&#xff0c;用<slot></slot> 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内…

C++项目实战——基于多设计模式下的同步异步日志系统-⑫-日志宏全局接口设计(代理模式)

文章目录 专栏导读日志宏&全局接口设计全局接口测试项目目录结构整理示例代码拓展示例代码 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&#xff0c;阿里云专家博主&#xff0c;C…

安全典型配置(三)使用ACL禁止特定用户上网案例

【微|信|公|众|号&#xff1a;厦门微思网络】 安全典型配置&#xff08;一&#xff09;使用ACL限制FTP访问权限案例_厦门微思网络的博客-CSDN博客本例中配置的本地用户登录密码方式为irreversible-cipher&#xff0c;表示对用户密码采用不可逆算法进行加密&#xff0c;非法用…

VulnHub lazysysadmin

一、信息收集 1.nmap扫描开发端口 开放了&#xff1a;22、80、445 访问80端口&#xff0c;没有发现什么有价值的信息 2.扫描共享文件 enum4linux--扫描共享文件 使用&#xff1a; enum4linux 192.168.103.182windows访问共享文件 \\192.168.103.182\文件夹名称信息收集&…

YOLO目标检测——抽烟吸烟数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;公共场所监管、健康风险评估、戒烟干预数据集说明&#xff1a;YOLO目标检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富。使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(json)和yolo(txt)三…

mask-R-CNN

前言 代码 论文 # Mask-rcnn 算法在 torch vision 中有直接实现&#xff0c;可以直接引用使用在自己的工作中。 import torchvision model torchvision.models.detection.maskrcnn_resnet50_fpn(weightsMaskRCNN_ResNet50_FPN_Weights.DEFAULT)Mask R-CNN&#xff08;Mask R…

uni-app实现拍照功能

直接些这样的组件代码 <template><view><button click"takePhoto">拍照</button><image :src"photoUrl" v-if"photoUrl" mode"aspectFit"></image></view> </template><script&g…

Web(3)网络扫描与window,Linux命令

NMAP各种选项的使用 三种情况修改IP地址总结&#xff1a; 1.为漏洞环境配ip地址 注&#xff1a;1.打开metasploitable后&#xff0c;用mafadmin/msfadmin登录后&#xff0c;重新设置密码&#xff0c;su root登录; 为此创建一个ip地址&#xff0c;命令&#xff1a;ifconfig et…

centos 7.9离线安装wget

1.下载安装包 登录到wget官网上下载最新的wget的rpm安装包到本地 http://mirrors.163.com/centos/7/os/x86_64/Packages/ 2.上传安装包到服务器 3.安装 rpm -ivh wget-1.14-18.el7_6.1.x86_64.rpm 4.查看版本 wget -V

智能测径仪数据采集系统 棒材产线智能化提升方向必备

棒材企业通过学习先进技术和进行技术交流&#xff0c;形成了建设智能化生产线的共识&#xff0c;然而棒材生产线目前存在数据采集效率低、物料跟踪难、质量管控弱、成品质量差、库区混乱、成本居高等问题。通过增加钢坯表面检测、钢坯无头焊接、控轧控冷、自动测径、高速冷床、…

C++DAY46

myWidget::myWidget(QWidget *parent): QWidget(parent) {this->resize(1280,720);this->setWindowTitle("300英雄");this->setWindowIcon(QIcon("D:/BaiduNetdiskDownload/孤独摇滚图标/1.png"));this->setStyleSheet("background-color…

AI电销机器人好不好用关键是什么?

影响AI电销机器人是否好用的两个因素分别是&#xff0c;识别系统以及线路。 有很多电销企业都想找一个好用的AI电销机器人&#xff0c;可是什么样的机器人才是好用的机器人呢?有哪些因素会影响AI电销机器人好不好用呢? 添加图片注释&#xff0c;不超过 140 字&#xff08;可选…

内存访问与栈

内存访问与栈 1 内存分段2 DS和[address]3 mov、add、sub指令形式4 栈4.1 入栈与出栈4.2 SS与SP4.3 空栈4.4 栈顶超界4.5 push、pop指令 5 小结 本文属于《 X86指令基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 内存分段 在x86程序执行时&#xff0c;内存会被分段&am…

微信小程序的框架

目录 一、视图层 1. WXML 数据绑定 列表渲染 条件渲染 模板 2. WXSS 尺寸单位 样式导入 内联样式 选择器 3. WXS事件 二、逻辑层 1. 页面生命周期 2.跳转 1. 一级跳一级 2. 一级跳二级 3. 二级跳二级 4. 二级跳一级 总结 带给我们的收获 一、视图层 1. …

竞赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

微信小程序使用阿里巴巴iconfont,报错Failed to load font http://at.alicdn.com/t/..........

介绍 上篇文章&#xff0c;介绍了&#xff0c;在微信小程序里导入并使用阿里巴巴iconfont图标&#xff1b;但是在页面里使用后&#xff0c;可以看到后台日志有打印错误信息&#xff0c;具体报错如下&#xff1a; 分析 报这个错&#xff0c;是因为项目里使用了 iconfont字体…

OpenCV15-图像边缘检测:Sobel、Scharr、Laplace、Canny

OpenCV15-图像边缘检测&#xff1a;Sobel、Scharr、Laplace、Canny 1.边缘检测原理2.Sobel算子3.Scharr算子4.生成边缘检测滤波器5.Laplacian算子6.Canny算法 1.边缘检测原理 图像的边缘指的是图像中像素灰度值突然发生变化的区域&#xff0c;如果将图像中的每一行像素和每一列…

功能集成,不占空间,同为科技TOWE嵌入式桌面PDU超级插座

随着现代社会人们生活水平的不断提高&#xff0c;消费者对生活质量有着越来越高的期望。生活中&#xff0c;各式各样的电气设备为我们的生活带来了便利&#xff0c;在安装使用这些用电器时&#xff0c;需要考虑电源插排插座的选择。传统的插排插座设计多暴露于空间之中&#xf…

直播美颜技术的技术背后:美颜SDK的原理与实践

对于美颜美颜SDK来说大家都不会陌生&#xff0c;通过它&#xff0c;我们能够实现实时美颜效果&#xff0c;改善视频质量&#xff0c;吸引更多观众。 一、美颜SDK是什么&#xff1f; 美颜SDK为开发者提供了一整套美颜和图像处理功能&#xff0c;用于实时处理直播视频流。这个工…