使用antd下拉框远程搜索（模糊查询）

html

<Form.Item label="客户姓名" name="customerId" rules={[{required: true, message: '请选择客户姓名' }]}><Select placeholder="请选择客户姓名" getPopupContainer={trigger => trigger.parentNode} onChange={onCustomerChange}showSearchonSearch={onSearch}optionFilterProp="children"filterOption={(input, option: any) =>option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>{customerList.length > 0 ? customerList.map(item => {return (<Option value={item.customerId} key={item.customerId}>{item.namePhone}</Option>)}) : null}</Select></Form.Item>

js

//客户列表const customersList = (val) => {service.customersList(val).then((res: any) => {if (res.success) {setcustomerList(res.data)} else {message.error(res.errorMsg)}})}//客户模糊搜索const onSearch = (val) => {customersList({customerName: val })}

做数据回显时，先用后端返回的name查询列表

//详情const etail = () => {service.detail({id: props.id }).then((res: any) => {if (res.success) {//根据后端返回紫貂查询客户信息列表const phone = getStr(res.data.customer!.customerPhone)customersList({customerName: phone })//修改页面字段回显form.setFieldsValue({//客户信息...res.data.customer})setspinning(false)} }).catch(e => {console.log(e) })}