BeSelect 选择框

当选项过多时,使用下拉菜单展示并选择内容。

基本用法

value:""

  • 测试0
  • 测试1
  • 测试2
  • 测试3
  • 测试4
  • 测试5
  • 测试6
  • 测试7
  • 测试8
  • 测试9
  • 测试10
  • 测试11
  • 测试12
  • 测试13
  • 测试14
  • 测试15
  • 测试16
  • 测试17
  • 测试18
  • 测试19
显示代码

有禁用选项

options数组中设定disabled值为 true,即可禁用该选项

value2:undefined

  • 测试
  • 测试2
  • 测试3
显示代码

禁用状态

选择器不可用状态

  • 测试
  • 测试2
  • 测试3
显示代码

多选

适用性较广的基础多选

value4:["1"]
  • 测试
  • 测试2
  • 测试3

value5:[]
  • 测试
  • 测试2
  • 测试3
显示代码

Attributes

参数 说明 类型 可选值 默认值
value 绑定值 boolean / string / number / [string | number]
multiple 是否多选 boolean false
disabled 是否禁用 boolean false
value-key(TODO) 作为 value 唯一标识的键名,绑定值为对象类型时必填 string value
size 输入框尺寸 string medium/small/mini
clearable 是否可以清空选项 boolean false
collapseTags 多选时是否将选中值按文字的形式展示 boolean false
multipleLimit 多选时用户最多可以选择的项目数,为 0 则不限制 number 0
name select input 的 name 属性 string
autocomplete select input 的 autocomplete 属性 string off
placeholder 占位符 string 请选择
filterable(TODO) 是否可搜索 boolean false
allow-create(TODO) 是否允许用户创建新条目,需配合 filterable 使用 boolean false
filter-method(TODO) 自定义搜索方法 function
remote(TODO) 是否为远程搜索 boolean false
remote-method(TODO) 远程搜索方法 function
loading(TODO) 是否正在从远程获取数据 boolean false
loading-text(TODO) 远程加载时显示的文字 string 加载中
no-match-text(TODO) 搜索条件无匹配时显示的文字,也可以使用slot="empty"设置 string 无匹配数据
no-data-text(TODO) 选项为空时显示的文字,也可以使用slot="empty"设置 string 无数据
reserve-keyword(TODO) 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 boolean false

Events

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visibleChange 下拉框出现/隐藏时触发 出现则为 true,隐藏则为 false
removeTag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

Slot

name 说明
suffix Select 组件尾部内容

BeOption

name 说明
label 展示内容
value 选项卡的值
disabled 禁用 默认false
slot 新增插槽(v1.1.16)