AntdPro中-ProFormSelect组件的使用说明
AntdPro是对antd又进行了一次封装,相比antd使用起来方便了许多。但是最近初次使用的时候,还是踩了很多坑,这里就记录一下:
对于带搜索功能的select选框,是比较常用的,但是这次在说使用的时候,选中了选项之后并没有清空搜索框,也就是下图这样的情况:
其实熟悉antd的朋友都知道,配置 autoClearSearchValue:true, 即可,但是我给了autoClearSearchValue属性之后,会有错误抛出,会提示你ProFormSelect上没有autoClearSearchValue属性。包括如果使用表单项的onChange事件也会有错误抛出
如下图:
后来查看了官方文档也没有这方面的说明,最后无意中看到,配置mode: multiple 是在fieldProps这样一个属性里面配置的,于是就尝试了在这里面配置刚才的autoClearSearchValue属性以及使用onChange事件,发现就不会有错误提示了。
配置项:
<ProFormSelect label="负责人员:" name="name" valueEnum={ { 1: 小王, 2: 小刘, 3: 小李, }} showSearch //开启搜索 fieldProps={ { mode: multiple, //多选 autoClearSearchValue:true,//选中后清空搜索框 //使用onChange onBlur onChange:(value)=>{ return value //必须要return一个值出去 表单项才会展示值在输入框上 }, // onBlur }} colProps={ { span: 8 }} //在整个的ProForm表单中栅格化展示表单