Skip to content

下拉单选

imageimage

介绍

当用户需要从一组数据中选择一个,可以使用下拉单选组件,点击后选择对应项。

API

Props

参数名描述类型默认值
status状态'default' |'disabled'|'hide'|'readonly''default'
title标题string-
showLabel显示标题boolean-
value默认值string-
placeholder占位提示string'请选择'
width字段占比'25%'|'50%'|'75%'|'100%''100%'
labelWidth标签宽度string-
name数据字段string-
allowSearch可搜索booleanfalse
searchDelay搜索事件延迟时间,可搜索生效时可配置string'500'
filterOption是否过滤选项booleantrue
optionFitWidth下拉框宽度自适应booleanfalse
allowClear清除按钮booleanfalse
allowCreate允许创建booleanfalse
optionType选项类型,子表单中可配置'custom'|'cascade'|'search''custom'
isColor选项及选择结果以不同颜色呈现booleanfalse
isVirtualList虚拟列表booleanfalse
virtualListHeight可视区域高度,虚拟列表number200
options选项配置Options-
cascadeCol关联数据,子表单中选项类型为cascade时可配置string-
cascadeApi联动查询API,子表单中选项类型为cascade时可配置string-
searchApi搜索API,子表单中选项类型为search时可配置string-
fieldNames指定字段名{key:string,title:string}{key:'key',title:'value'}
footerButtons操作FooterButtons-
baseStyle自定义样式, 表格整体自定义样式string-
customClass类名绑定, 绑定类的名称string-
boxStyle盒模型 , margin,border,padding设置BoxStyle-
uniqueKey唯一标识 , 组件的唯一标识string-
customRender自定义选项内容booleanfalse
renderFunc自定义选项内容函数Function"function render(ctx, params) {\n // 返回jsx渲染内容\n return {params.item.value}\n}"
extra补充说明string-
tip气泡提醒string-
validate校验Validate-
loop循环 , 循环渲染设置Loop-

Props-选项配置

参数名描述类型默认值
key选项值string-
value标题string-
default默认选中booleanfalse
color颜色'default'|'cyan'|'red'| 'green'|'lime'|
'orange'|'orangered'|'gold'|'purple'|
'magenta'|'blue'|'gray'|'pinkpurple'
-
disabled禁用boolean-

Props-操作

参数名描述类型默认值
status状态'default' |'disabled'|'hide''default'
title标题string-
loading加载状态booleanfalse
icon图标string-

Events

事件名描述参数
onChange值发生改变时ctx
params:{value:string}
loop:LoopParams
onSearch用户搜索时ctx
params:{value:string}
loop:LoopParams
onClear点击清除按钮时ctx
params:PointerEvent
loop:LoopParams
onInputValueChange值发生改变时ctx
params:{value:string}
loop:LoopParams
onPopupVisibleChange下拉框显示状态改变时ctx
params:{visible:boolean,value:string}
loop:LoopParams
onScrollToBottom下拉列表滚动到底部时触发ctx
params:{event:Event}
loop:LoopParams
onClick操作按钮,点击时触发ctx

Type

javascript
// 选项配置
type Options = {
  "key":string,
  "value":string,
  "default":boolean,
  "color":"default"\|"cyan"\|"red"\|"green"\|"lime"\|"orange"\|"orangered"\|"gold"\|"purple"\|"magenta"\|"blue"\|"gray"\|"pinkpurple",
  "disabled":boolean
}

// 操作
type FooterButtons = {
  "status":string,
  "title":string,
  "loading":boolean,
  "icon":string,
  "events":{
    "onClick":{
      "id":number,
      "method":"onClick",
      "value":string,
      "name":"intl_design.event.onClick",
      "type":"js"
    }[]
  }[]
}