Lov

弹出选择输入框 - 大数据值集取值表单控件，弹出选择输入框。何时使用：当用户需要从大数据列表中取值。需结合后端值集接口，配置对应字段属性。

Lov 是 Pro 组件库结合中台场景需求提炼出的大数据值集组件。与上一章快码的区别在缓存及数据量，其余很多属性是通用的。

Lov 对应数据量大，缓存只会缓存当前值集视图（弹窗 + 列表）配置。同时，Lov 虽然支持 options 属性配置 DataSet 数据源模式，但是对应还是需要后端支持值集视图配置，数据源也建议查询得来。

基本使用

字段配置：

{
  name: 'code',
  textField: 'code',
  type: 'object',
  lovCode: 'LOV_CODE',
  lovPara: { code: '111' },
},
// 组件渲染
<Lov dataSet={this.ds} name="code" />

点击弹出：

可见，lov 弹出窗中包含一个 table，那么对应的数据信息展示就很灵活多变了，同时支持 table 的大部分属性和交互。

更多参考 Lov demo。

Lov 前端不会做缓存及预先查询，因此查询时需要后端返回提供对应展示字段及值字段，组件会做对象组合并回显，对象字段的组合通过 bind 字段属性关联。

场景回显失败场景：Lov 数据查询返回后，bind 字段没有回显？

代码：

{ name: ‘code’, type: ‘object’, label: ‘代码描述’, lovCode: ‘LOVCODE’ }, { name: ‘codedes’, type: ‘string’, bind:’code.description’ }, Lov 相关配置字段： valueField：code textField： description 后端查询数据返回：{ code: xxx, code_des: aaa } 错误：

相关字段名和lov对象字段名重复，bind的字段在返回数据 code 对象下找 description → undefined，因此显示为空。修改 code 为其他字段名 -> codeLov 即可。

总结：理清 Lov 相关字段以及后端返回数据字段关系，理清数据对象。

使用前置要求

需要在项目中使用 Lov 组件，那么必须后端支持。

大概需要以下几点支持：

值集视图配置接口 - 对应有配置界面维护最好
1. 配置弹窗内 Table 展示列，渲染条件…
2. 配置弹窗属性，高度…

LovConfigItem组件内定义可配置字段。

值集数据接口 - 组件内规则与快码类似
1. url: ‘/common/lov/${lovCode}/‘ - 支持全局配置修改

属性名	描述	类型	默认值
lookupAxiosConfig	值列表请求的配置或钩子，详见AxiosRequestConfig。配置中默认 url 为 lookupUrl， method 为 post。	AxiosRequestConfig \| ({ dataSet: DataSet, record: Record, params?: any, lookupCode: string }) => AxiosRequestConfig
lovDefineUrl	Lov 取配置的地址或返回地址的钩子	string \| ((code: string) => string)	code => `/sys/lov/lov_define?code=${code}`
lovDefineAxiosConfig	返回 Lov 配置的请求的配置或钩子，详见AxiosRequestConfig。配置中默认 url 为 lovDefineUrl， method 为 post。	AxiosRequestConfig \| (code: string, lovConfig?: LovConfig, { dataSet, params, data }) => AxiosRequestConfig
lovQueryUrl	Lov 取值的地址或返回地址的钩子	string \| ((code: string) => string)	code => `/common/lov/dataset/${code}`
lovQueryAxiosConfig	Lov 查询数据请求的配置或钩子，详见AxiosRequestConfig。配置中默认 url 为 lovQueryUrl， method 为 post。	AxiosRequestConfig \| (code: string, lovConfig?: LovConfig, { dataSet, params, data }) => AxiosRequestConfig
lovTriggerMode	Lov 触发弹窗模式，可选 icon，input。	string	icon
lovTableProps	全局配置 lov 的 tableProps,当同时存在 lovTableProps 以及的时候会进行一层合并	TableProps	{}
lovModalProps	Lov 弹窗属性，详见ModalProps	ModalProps

Lov 的使用场景和方式也是极其灵活和多变的，目前组件库开放的配置以支持大部分场景，如果您在使用或集成中遇到了困难，欢迎联系我们。

引导教程暂时到此，对 Pro 组件库常用组件做了简单的引导使用，后续会继续完善，欢迎提出相关意见帮助我们进一步改善。

联系我们

Hzero 平台：https://open.hand-china.com/market-home/detail/29?from=home

猪齿鱼平台：https://choerodon.io/zh/docs/concept/choerodon-concept/

社区：https://choerodon.io/zh/community/

官网：https://open-hand.github.io/choerodon-ui/zh

国内镜像：https://open-hand.gitee.io/choerodon-ui/zh

Github:https://github.com/open-hand/choerodon-ui