a-select扩展菜单使用dropdownRender插槽并且增加搜索调后端接口，整理一下1.template中{{item.customerName}}//a-select扩展菜单使用dropdownRender

本文用了是React+TypeScript+antdesign的实例通过antdesignselect属性Api提供的dropdownRender完成antdesignselect地址Selectprops

Select组件的dropdownRender属性，可以扩展下拉菜单。我们只需要在这个属性中编辑代码，将操作区域用Divider组件与选项分离开即可。

如果你的antd版本大于等于4.4.0，则直接可以使用dropdownRender属性自定义，本篇文章可以直接跳过。

在antdesignvue开发项目中，有一个这样的需求：select下拉显示列表，同时可输入查询首先html代码如下：由于在select里面添加点击事件是无效的，所以我在外层包裹了一个div，添加了点击事件backChange具体事件内容如下：backOpen用于控制select的下拉状态，select-table是封装的子组件，当点击时会触发加载表格字段的函数表格如下：因为表格内容过长，所以我们

DatePicker组件，每次选择一个日期，感觉这样写太过简单，于是，就想结合Select和Calendar组件一起使用，想法是很美好的，操作起来就困难重重了，我想要的效果如下图：采用的是Select的中dropdownRender

先上效果图~importReact,{useState,useCallback,useMemo,useEffect,useRef,}from'react';import{Select,SelectProps,Space,Checkbox,Input,Empty,Tooltip,}from'antd';import{debounce,isArray,isEmpty,isFunction}from'l

背景antdvselect官方使用dropdownRender对下拉菜单进行自由扩展，为了解决点击dropdownRender里的内容浮层关闭的问题，官方建议添加preventDefault，但是这样扩展内容里的输入框无法聚焦一开始采取的方案是手动给自定义的输入框

antd+react实现通过下拉搜索，检测option数据，如果没有匹配的数据，就把输入的内容新增到option下拉数据中效果图用到的antdAPI：dropdownRender，onSearchoption.children.toLowerCase

我看到select有个dropdownRender的方法，允许用户自定义下拉框的内容，这就好办。开始1、先写上select组件的基本语法接下来就要用到slot插

简言之：外层套div，然后利用Select的open属性。直接上代码：新增分组//大概这么个引入的意思，具体看子级当前项目怎么个引入方式import{Form,Select,Divider}from'ant-design-vue';import{PlusOutlined}from'@ant-design/icons-vue';constAFormItemRest=Form.ItemRest：con