当前位置: 首页 > 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

http://www.lryc.cn/news/194992.html

相关文章:

  • Golang基础学习笔记
  • ES _bulk 批量操作用法
  • LCR 176.判断是否为平衡二叉树
  • 跨境商城源码有哪些独特的功能和优势
  • latex如何对.pdf格式的图片实现裁剪
  • windows10下 iperf3测试带宽
  • Stratasys F170 3D打印教程
  • 以太坊 CALL 数据解析【ETH】
  • Xilinx IP 10G Ethernet PCS/PMA IP Core
  • 软件设计师_面向对象_学习笔记
  • 行业追踪,2023-10-16
  • ubuntu深度学习配置
  • 大数据flink篇之三-flink运行环境安装后续一yarn-session安装
  • Chrome Extensions v3 迁移清单
  • TCP/IP(十二)TCP的确认、超时、重传机制
  • C/C++陷阱——临时变量的产生和特性
  • 【音视频|ALSA】SS528开发板编译Linux内核ALSA驱动、移植alsa-lib、采集与播放usb耳机声音
  • C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储)
  • 【ROS】使用vscode浏览navigation2源码时,提示:没有那个文件或目录
  • ARM-day9作业
  • ORA-00600: internal error code, arguments
  • C#里氏替换
  • Java-使用sqlSessionTemplate实现批量更新-模拟mybatis 动态sql
  • Eslint配置 Must use import to load ES Module(已解决)
  • 正向代理(流量代理)
  • 易天光通信推出100G BIDI ER光模块最新解决方案
  • Flask框架配置celery-[1]:flask工厂模式集成使用celery,可在异步任务中使用flask应用上下文,即拿即用,无需更多配置
  • 合并二叉树
  • Sanic​——Python函数变成API的神器
  • Windows连接不上VMware,ping不通的问题