Select

何时使用：弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。

Pro Select 与基础组件的下拉选择框区别在于 Pro 提炼了中台业务组件中快码的概念集成于 Select 组件中，通常我们称 Pro Select 为值集或快码。

快码值集数据源维护在后端，前端使用时字段配置对应的 lookupCode 即可请求关联快码数据源并做缓存，快码一般适合于数据量不大的场景。

接下来我们来实践一下如何利用值集快码，在业务开发中快速高效的使用 Select 组件。

快码值列表

这里我们需要参考 demo -值列表代码。

查看 DataSet 字段配置：

{ 
  name: 'sex',
  type: 'string', 
  lookupCode: 'HR.EMPLOYEE_GENDER' 
},

Pro 组件中会依据 type: string + lookupCode 将对应字段在组件中渲染成 Select。此时下拉的数据源来自于 lookupCode 对应的后端请求接口。例如以上字段配置，组件库内置接口规则生成url：’/common/code/HR.EMPLOYEE_GENDER/‘。

当然后端接口不符合组件内置规则时，可以使用 lookupAxiosConfig 属性修改配置，支持全局配置。

属性名	描述	类型
lookupAxiosConfig	值列表请求的配置或钩子，详见AxiosRequestConfig。配置中默认 url 为 lookupUrl， method 为 post。	AxiosRequestConfig \| ({ dataSet: DataSet, record: Record, params?: any, lookupCode: string }) => AxiosRequestConfig

Select 默认 option 取值对应数据源对象中的 value & meaning。例如以上数据源可能为：

[
        {
            "objectVersionNumber": 1,
            "codeId": 10001,
            "codeValueId": 10027,
            "description": "女性",
            "meaning": "女",
            "value": "F",
            "orderSeq": 10,
            "tag": null,
            "enabledFlag": "Y",
            "parentCodeValueId": null,
            "parentCodeValue": null,
            "parentCodeValueMeaning": null
        },
        {
            "objectVersionNumber": 1,
            "codeId": 10001,
            "codeValueId": 10028,
            "description": "男性",
            "meaning": "男",
            "value": "M",
            "orderSeq": 20,
            "tag": null,
            "enabledFlag": "Y",
            "parentCodeValueId": null,
            "parentCodeValue": null,
            "parentCodeValueMeaning": null
        }
]

那么在选中 Select 选项 “男” 时，对应的值为 “M”。如果需求显示字段非 meaning，可通过 textField 修改；值字段通过 valueField。

属性名	描述	类型	默认值
textField	值列表的文本字段	string	meaning
valueField	值列表的值字段	string	value

例如：

{ 
  name: 'sex',
  type: 'string', 
  textField: 'description',
  valueField： 'codeId'，
  lookupCode: 'HR.EMPLOYEE_GENDER' 
},

渲染选项及选值会对应变化。

绑定数据源

这里我们需要参考 demo -绑定数据源&数据源选项。

在前几章的实践中，我们已经使用过数据源选型，利用 DataSet 作为下拉数据源。

例如邮箱后缀的数据源管理，Form 性别、语言的管理。这样基于 DataSet 去管理快码数据源比较基础的渲染遍历方便了许多，也利于更复杂场景的动态数据处理。

理解快码的概念，在回顾一下之前的实践，这里我们就不再详细介绍。

快码相关方法

快码是平常工作开发中使用极其频繁的组件。因此与其相关的方法和属性也多，主要涉及以下。

Field props

属性名	描述	类型
textField	值列表的文本字段	string
valueField	值列表的值字段	string
lovPara	LOV 或 Lookup 查询参数对象	object
lookupCode	值列表代码	string
lookupUrl	值列表请求地址	string \| (code) => string
lookupAxiosConfig	值列表请求配置或返回配置的钩子，详见AxiosRequestConfig。配置中默认 url 为 lookupUrl， method 为 post。	AxiosRequestConfig\| ({ dataSet, record, params, lookupCode }) => AxiosRequestConfig
cascadeMap	快码和 LOV 查询时的级联参数映射。例如：cascadeMap: { parentCodeValue: ‘city’ }，其中’city’是当前所在数据源的其他字段名，parentCodeValue 是快码和 LOV 的查询参数	object
options	下拉框组件的菜单数据集	DataSet

FieldMethods

属性名	描述	类型	默认值
getText(lookupValue)	根据 lookup 值获取 lookup 描述	lookupValue- lookup 值，默认本字段值	string
getLookupData(lookupValue)	根据 lookup 值获取 lookup 数据对象	lookupValue- lookup 值，默认本字段值	object
fetchLookup()	请求 lookup 数据，若有缓存直接返回缓存数据。		Promise<object[]>

Configure 全局化配置

属性名	描述	类型	默认值
lookupCache	lookup 缓存配置。maxAge- 缓存时长max- 缓存数量上限	object	{ maxAge: 1000 60 10, max: 100 }
lookupUrl	lookup 取值的地址或返回地址的钩子	string \| ((code: string) => string)	code => `/common/code/${code}/`
lookupAxiosConfig	值列表请求的配置或钩子，详见AxiosRequestConfig。配置中默认 url 为 lookupUrl， method 为 post。	AxiosRequestConfig \| ({ dataSet: DataSet, record: Record, params?: any, lookupCode: string }) => AxiosRequestConfig
lookupBatchAxiosConfig	返回 lookup 批量查询配置的钩子，详见AxiosRequestConfig。	(codes: string[]) => AxiosRequestConfig

Select API

属性名	描述	类型
options	下拉框选项数据源（使用后需要自行处理参数等）	DataSet
noCache	下拉时自动重新查询，不缓存下拉数据源	boolean

下一章我们会介绍支持大数据量级的值集 - LOV。