选择器 Select #

当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。

基础用法 #

v-model 的值为当前被选中的el-option的 value 属性值

禁用状态 #

选择器不可用状态,设置属性 disabled 即可

可清空单选 #

设置 clearable 属性即可清空输入框

有禁用选项 #

在 bn-option 中，设定 disabled 值为 true，即可禁用该选项

多选 #

设置属性 multiple 即可。注意此时 v-model 要绑定是个 数组 的字段。

自定义模板 #

在bn-option中，设定默认插槽即可

模糊搜索 #

可以利用模糊搜索功能快速查找选项。通过添加 filterable 来启用过滤。filter-method自定义搜索方法，该方法必须是个函数，第一个参数是option实例对象代理，第二个参数是搜索关键词query，通过返回布尔值表示是否命中。

远程搜索 #

输入关键字以从远程服务器中查找数据。此功能必须将 filterable 和 remote 设置为true，同时传入一个 remote-method。 remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。此时你可以拿到当前输入框的query,然后你在请求接口拿到数据后在渲染option。

OptVmProxy #

export type ValueKey = string | number

export interface OptVmProxy {
  value: ValueKey
  label: string | number
  disabled: boolean
  currentLabel: string
  currentValue: ValueKey
  isSelected: boolean
  visible: boolean
  isHover: boolean
  hoverItem: () => void
  selectOptionClick: () => void
}

API #

Select Attributes #

Select Events #

Select Slots #

Option Attributes #

Option Slots #