Select选择器(antd-design组件库)简单使用以及增加搜索功能

news2024/11/24 9:37:23

1.Select选择器

下拉选择器。

2.何时使用

·弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。

·当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

组件代码来自: 选择器 Select - Ant Design

3.本地验证前的准备

参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】,将 选择器 Select - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码,启动代码,可在本地查看现象和更改代码。

4.本地验证Select的基本使用

复制下图所示代码,了解Select的一些基本使用格式

5.在上一步的第一个Select中增加搜索功能,在第一个Select中增加下述3行代码,即可实现搜索子项的功能

showSearch
optionFilterProp="children"
filterOption={(input, option) => (option?.label ?? '').includes(input)}

效果图如下:

本文仅介绍了组件Select的部分内容,更多内容请参阅官方文档: 选择器 Select - Ant Design

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

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

相关文章

chatgpt赋能python:Python如何倒序输出列表

Python如何倒序输出列表 Python是一种高级编程语言,自由、开源、跨平台,被广泛用于Web开发、数据分析、机器学习等领域。在Python中,列表是一种常见的数据结构,它允许存储多个元素,并支持索引、切片等操作。本文将介绍…

chatgpt赋能python:Python如何保存文件-最全面的指南

Python如何保存文件 - 最全面的指南 Python是一种强大的编程语言,它在处理文本文件、CSV文件、Excel文件、图像文件和PDF文件等方面表现出色。然而,如何在Python中保存这些文件,对于初学者来说可能会有些棘手。在本篇文章中,我们…

自建极简Ethercat主站-底层驱动编写

1、简介 MECM(Mini Ethercat Master),名字随便起的。已经学习了一段时间的Ethercat总线了,目前的想法就是自己简单实现一个Ethercat主站,没有太多的冗余功能,暂时不考虑太多的容错机制,仅实现目前用到的FO…

chatgpt赋能python:Python奇偶求和:简单实用的算法

Python奇偶求和:简单实用的算法 Python作为一门高级编程语言,不仅适用于数据分析及科学计算领域,也可用于日常生活中的实用问题。例如,人们常常需要对一个整数序列中的奇数和偶数进行求和,以便了解各自的总数或者对它…

【软件测试】测试经验:IT 软件测试技术系统化学习方法

目录 一、IT 软件测试技术的介绍 (1)相关职称证书 ① 「中级」软件评测师 ②「高级」项目管理师 (2)背景 (3)作用 (4)行业应用 (5)技术概况 二、…

ES数据库介绍

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 前言 一、ES(ElasticSearch)是什么? 二、ES的使用场景 三、ES的特点 四、ES和传统数据库对比 总结 前言 今天项目通过python用到了ES数据库…

ubuntu22.04安装docker

1、卸载旧版本(如果有的话) sudo apt-get remove docker docker-engine docker.io containerd runc 2、 添加 Docker 的官方 GPG 密钥 curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add - 3、设置稳定版仓库 …

python+vue健身房会员管理系统97s0t

健身管理系统根据需求分析,分为多个角色模块,分别为普通管理员和超级管理员模块,其中健身俱乐部普通管理员和健身俱乐部超级管理员都可以使用,不同角色登录显示不同的权限功能。本健身房管理系统管理员,会员&#xff0…

二叉树part7 | ● 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先

文章目录 530.二叉搜索树的最小绝对差思路代码困难 501.二叉搜索树中的众数思路官方题解代码困难 236. 二叉树的最近公共祖先思路代码困难 今日收获 530.二叉搜索树的最小绝对差 530.二叉搜索树的最小绝对差 思路 题目中要求在二叉搜索树上任意两节点的差的绝对值的最小值。…

51小车测速及OLED显示速度

1.小车测速 用途:广泛用于电机转速检测,脉冲计数,位置限位等。有遮挡,输出高电平;无遮挡,输出低电平接线 VCC 接电源正极3.3-5V GND 接电源负极 DO TTL开关信号输出 AO 此模块不起作用 测试原理和单位换算 轮子走一…

Springboot常见注解总结

给实体类使用该注解,结合后续的EXCEL工具类进行使用,能加快开发过程中关于文件导入的需求 文章目录 目录 前言 1. Excel注解 2. Annotation注解 3. Retention注解 4. Target注解 4. Document注解 5.Inherited注解 5.RestController注解 6.swagger注解(AP…

《10.21作业修正》

【一】 cookie概念解析:cookie是一种保存在客户端的小型文本文件,用于保存服务器通过set-cookie字段返回的数据,在下次请求服务器道德时候通过cookie字段将内容返回发送给服务器,是http进行客户端维护的一中方式,并且c…

Mycat中间件综合部署高可用-读写分离-分库分表(1.6)

Mycat中间件综合部署(1.6) 实施拓扑 一,环境搭建 1.服务分配 主机服务192.168.2.1MySQL-cluster-1192.168.2.2MySQL-cluster-2192.168.2.3Mycat 2.MySQL-cluster1分配 server-id端口角色13306master123307slave133308master243309slave2…

c语言中字符串比较的库函数是什么

说起比较运算&#xff0c;肯定第一时间想到了C语言中关于比较的相关运算符 “>、<、&#xff01;、>、<、”&#xff0c;那么要比较两个字符串是否相等是不是直接用“”比较就行了。下面就来看看这种方法行不行&#xff1f; 先看一个例子 void main( void ) {cha…

chatgpt赋能python:Python中如何使用局部变量

Python中如何使用局部变量 Python是一种高级编程语言&#xff0c;它是一种解释型语言&#xff0c;因此它的速度可能不如C 或Java等编译型语言快&#xff0c;但是Python的语法简洁&#xff0c;易于阅读和编写&#xff0c;并且具有强大的功能。 在Python中&#xff0c;变量是一…

SAP VK11税码的理解

背景:销售订单税率获取逻辑 1.工厂&#xff0c;工厂定义维护了国家代码信息 (SO–工厂–国家代码) 2.客户主数据通用数据维护了国家代码 (SO-客户–国家代码) 3.客户主数据销售数据维护了国家代码对应的税分类&#xff08;此国家代码由销售组织对应国家代码维护的国家代码带出来…

DAY08_JavaScript

目录 1 JavaScript简介2 JavaScript引入方式2.1 内联脚本2.2 内部脚本2.3 外部脚本 3 JavaScript基础语法3.1 书写语法3.2 输出语句3.3 变量3.4 数据类型3.5 运算符3.5.1 \和区别3.5.2 类型转换 3.6 流程控制语句3.6.1 if 语句3.6.2 switch 语句3.6.3 for 循环语句3.6.4 while …

c++ ——day1 homework

1.整理思维导图 2.有以下定义&#xff0c;哪些变量可以改变 const和*的位置&#xff0c;const在前&#xff0c;里面的值不能动*p&#xff0c;地址可以动p const在后&#xff0c;地址不能动&#xff0c;值可以动 const char *p&#xff1a;内容不可变&#xff0c;地址可变 co…

PCL点云处理之添加高斯噪点的两种方法(详细注释版)(一百八十一)

PCL点云处理之添加高斯噪点的两种方法(详细注释版)(一百八十一) 一、实验效果二、算法简介三、具体流程四、PCL自带函数实现1.代码2.结果五、Boost函数实现1.代码2.结果总结一、实验效果 通过实验测试,效果如上所示,算法可以正常运行 二、算法简介 高斯噪声是指它的概率…

实习内容总结

目录 项目BMS后台管理系统FantasyPayment通用支付框架 技术文档 实习时间&#xff1a;2022.12 &#xff5e; 2023.06 公司是初创公司&#xff0c;主要专精于AIGC方向&#xff0c;之前主要是To C的业务&#xff0c;做三消类游戏。今年刚刚转向To B业务&#xff0c;我去的时候Go…