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

news/2024/12/5 6:24:06/

需要实现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.ppmy.cn/news/1157389.html

相关文章

vue小写数字转大写-例如:11转为十一

vue小写数字转大写-例如&#xff1a;11转为十一 在Vue中&#xff0c;可以使用自定义过滤器&#xff08;Custom Filter&#xff09;来将数字转换为大写的形式。 下面是一个示例&#xff1a; // main.js import Vue from vue;Vue.filter(toChineseNumber, function (value) {c…

24、Flink 的table api与sql之Catalogs(java api操作数据库、表)-2

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

incStrong() 和 decStrong()

在 Android JNI 层代码中&#xff0c;incStrong() 和 decStrong() 是在使用跨越 JNI 边界的对象时常见的方法。它们用于在本地代码中增加和减少对象的引用计数。这些方法通常用于管理对象的生命周期&#xff0c;以确保在不再需要对象时能够正确释放资源。 在 Android 中&#…

图像边缘检测--(Sobel、Laplacian、Canny)

1、图像中各种形状的检测时计算机视觉领域中非常常见的技术之一,特别是图像中直线的检测,圆的检测,图像边缘的检测等,下面将介绍如何快速检测图像边缘。 2、边缘是不同区域的分界线,是周围(局部)像素有显著变化的像素的集合,有幅值与方向两个属性。这个不是绝对的定义,…

IDEA的使用(四)创建不同类型的工程(IntelliJ IDEA 2022.1.3版本)

1. 创建Java工程 创建之后&#xff0c;src下是空的。可以在src下创建软件包Package&#xff0c;命名采用域名倒序。在软件包下再创建Java类。Java类运行后出现中文乱码&#xff0c;就到控制台和文件编码这两个地方设置编码。 2. 创建JavaWeb工程 2.1 在win11和IDEA中配置Tomca…

C# RestoreFormer 图像修复

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace 图像修复 {pu…

LeetCode【46】全排列

题目&#xff1a; 代码&#xff1a; 在这里插入代码片

Unity中Shader的深度写入ZWrite

文章目录 前言一、更新深度缓冲区中值二、深度值的写入操作只有两个选择 开启 和 关闭ZWrite OnZWrite Off 三、深度写入在半透明物体物体中开启的情况1、特效一般都需要关闭深度写入2、如果在人物模型上使用 特效半透明 的 Shader&#xff0c;为了不出现模型自身穿透问题&…