使用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) })}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！