remote-select

基于 Antd Select 组件封装，可根据搜索值请求远程接口获取数据, remote-select 属性继承原Antd Select 属性。

📦 安装

tnpm install @ali/remote-select --save

🔨 示例

import RemoteSelect from '@ali/remote-select';

// 默认
<RemoteSelect
  remoteUrl="/remote/data/url?page=1&size=10&searchKeyword="
/>

// 自定义选项展示
<RemoteSelect
  showSearch
  popContainer="developerFormWrap"
  customLabelField="realNameCn"
  customeValueField="empId"
  placeholder="搜索开发人员"
  remoteUrl="/api/user?size=30&w="
  style={{ width: '100%' }}
>
  {o => (<Option key={o.value} value={o.value}>{`${o.label}(${o.value})`}</Option>)}
</RemoteSelect>

✨ API

• 继承于Antd Select 属性，参见 Ant Design 文档

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | remoteUrl | 获取远程数据的url地址（需自行解决跨域问题） | String | - | | customLabelField | 自定义label取值的字段名称 | Boolean | name | | customeValueField | 自定义value取值的字段名称 | Boolean | id | | recommendOptions | 自定义默认选项值，为对象数组,其中的对象key定义为：text、value | Array | [] | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | | children | 自定义选项值展示 | function(optionObject) | - |