lookup
概述
嵌入到输入框、form表单字段组合使用,显示下拉弹层或高级模式,选择内容。
lookup支持简单模式的选择,由简单模式切换到高级模式进行搜索选择和直接高级模式选择。
API
lookup props
| name |
description |
type |
default |
| mode |
显示模式'simple'/'advanced' |
string |
'simple' |
| multiple |
是否多选 |
bool |
false |
| moreText |
简单模式下自定义查看更更多显示标题 |
string |
|
| btnOkText |
自定义按钮名称 |
string |
|
| isAdvanceSearchVbl |
在简单模式下是否显示全部查找按钮 |
boolean |
false |
| customCls |
自定义样式 |
string |
|
| isSearchBox |
简单模式下是否显示搜索框 |
bool |
false |
| isAvator |
简单模式下是否显示头象 |
bool |
false |
| options |
列表数据 |
OptionsType[] |
[] |
| selectValue |
选中值列表 |
OptionsType[] |
[] |
| onSearchChange |
简单模式下搜索触发方法 |
Function |
- |
| autoFocus |
简单模式,输入自动获得焦点 |
bool |
true |
| searchUrl |
简单模式请求url |
string |
- |
| formatData |
数据格式化接口 |
Function |
- |
| onVisibleChange |
组件显示回调 |
Function |
- |
| onConfirm |
组件选择值后触发方法(简单模式、高级模式确定选择项触发) |
Function |
- |
| onCancel |
高级模式下取消选择触发 |
Function |
- |
| advancedVbl |
高级模式显示控制(直接显示高级模式用到) |
bool |
- |
| advanceParam |
高级组件需要的属性 |
advanceProps[] |
[] |
| translation |
多语言翻译 |
object |
null |
OptionsType
| name |
description |
type |
default |
| label |
标题 |
string |
|
| sublabel |
二级标题 |
string |
|
| value |
值 |
string |
|
| avator |
头象属性,请查看avatar组件http://gitlab.beisencorp.com/ux-phoenix/phoenix-monorepo/tree/master/src/components/avatar |
AvatarProps |
|
advanceProps(高级模式属性)
| name |
description |
type |
default |
| searchFormMeta |
searchForm的数据描述,参见searchform的文档 |
[] |
|
| tableMeta |
searchForm的数据描述,参见table的文档 |
[] |
|
| tablePrimaryKey |
table的主键,不传默认依次找value,id属性, |
string |
|
| advMetaUrl |
form和table的元数据请求接口 |
string |
|
| advMetaParam |
请求advMetaUrl时,发送的附加数据 |
string |
|
| advFormatMetaData |
格式化Meta数据,searchform和table描述数据 |
Function |
|
| advanceSearchUrl |
searchform改变后,发送获取table数据的请求url |
string |
|
| advanceSearchFunction |
searchform改变后,回调函数 |
Function |
|
| advFormatListData |
格式化table数据 |
Function |
|
| dlgTitle |
高级弹窗标题 |
string |
|
| maxSize |
多选模式下,最大选择数量 |
number |
|
advanceProps例子
tableMeta: {
columns: columns,
dataSource: tableData,
pagination:{
pageSize: 15
}
},
searchFormMeta: {
fields: fields
},
tablePrimaryKey: 'key'
安装及运行示例
npm install @beisen-phoenix/lookup
npm run examples