首页 > 其他分享 >antd下拉选择框搜索配置:filterOption

antd下拉选择框搜索配置:filterOption

时间:2024-05-07 18:23:49浏览次数:25  
标签:filterOption 下拉 选择 item 搜索 antd

 

 <Select
                  allowClear
                  mode="multiple"
                  showArrow={true}
                  showSearch={true}
                  filterOption={(inputValue, option) => option?.props?.label.includes(inputValue)}
                  placeholder="请选择用户"
                >
                  {notificationfeishuUsers.map((item) => {
                    return (
                      <Select.Option
                        key={item.id}
                        value={item.id}
                        label={item.name}
                        {...item}
                        className="OptionsBasic"
                      >
                        {item.name}
                      </Select.Option>
                    );
                  })}
                </Select>

 

标签:filterOption,下拉,选择,item,搜索,antd
From: https://www.cnblogs.com/Simoon/p/18178119

相关文章

  • SpringBoot+Thymeleaf渲染下拉框异常解决
    常规方式<selectclass="form-control"name="operationType"th:field="${itemTemp.operationType}"style="width:80%"th:disabled="${readonly}"><optionvalue="">选......
  • HarmonyOS 实现下拉刷新,上拉加载更多
    组件介绍PullToRefreshList允许用户通过下拉动作来刷新列表内容,以及通过上拉动作来加载更多的数据。组件内部封装了滚动监听、状态管理和动画效果,使得开发者可以轻松集成到自己的项目中。1.实现思路封装成可复用的公共控件:将下拉刷新和上拉加载更多功能封装为一个可复用的组......
  • antd表格日期排序
     {dataIndex:'contractSignDate',key:'contractSignDate',title:'合同签订日期',width:120,ellipsis:true,sorter:(a,b)=>moment(a?.contractSignDate).valueOf()-moment(b?.contractSignD......
  • antd日期选择框,前后日期增加限制
     constdisabledDateStart=useCallback((current)=>{if(!contractEndDateValue){returnfalse}else{returncurrent&&current>contractEndDateValue;}},[contractEndDateValue])constdisabledDateEnd=......
  • antd4表单手机号验证
     //自定义手机号校验规则constvalidatePhone=(_,value)=>{constphoneRegex=/^1[3456789]\d{9}$/;if(!value||phoneRegex.test(value)){returnPromise.resolve();}returnPromise.reject(newError('请输入有效的手机号码'));}......
  • 2024-04-28 记录antd-img-crop参数设置
    前言:以前在做富文本编辑的时候,关于图片裁剪部分使用了antd-img-crop,忘了还有那些可使用的参数,现在上网查找并记录下来吧。antd-img-crop:一个图片裁剪插件,用于包装antd组件库中的upload组件。其官网地址在此:https://github.com/nanxiaobei/antd-img-crop安装:pnpmaddantd-img......
  • uniapp 实现复选下拉框
    预览图相关代码<template> <viewclass="uni-stat__select"> <spanv-if="label"class="uni-label-text">{{label+':'}}</span> <viewclass="uni-stat-box":class="{'uni-stat......
  • 再次修复combobox下拉背景颜色
    2023年2月写的修复lazaruscombobox的下拉列表在linux时没有高亮显示选中的item的问题,需然解决了显示问题,但下拉列表的颜色在银河麒麟是灰黑色,和应用的颜色明显不搭,想要win一样样式,如果要改变下拉背景颜色,可以按以下修改就可以,当然,如果不想用白色,可以改为想要的颜色。打开laza......
  • 为 AntdUI 扩展一个 MessageBox 方法
    AntdUI是个很不错的开源WinFrom界面组件,使用中感觉消息对话框调用有点麻烦,于是按照MessageBox.Show的使用习惯,增加了一个扩展方法来调用,废话不多说,直接上代码。1usingSystem.Windows.Forms;23namespaceAntdUI4{5publicstaticclassWindowExtent......
  • apache poi 实现下拉框级联
    场景需求最近在项目中遇到个需求,需要提供一个批量导入的功能,常规做法就是提交excel模版文件,然后就是解析该文件读取数据,这时的模版文件在用户输入方面是没有限制的,用户输入啥就是啥,后台在解析的时候对值进行判断数据是否合法;在现有的业务场景下,是可以进一步限制用户的输入的,这一......