Appearance
Select 选择器
当选项过多时,使用下拉菜单展示并选择内容。
基础用法
适用广泛的基础单选
v-model的值为当前被选中的s-option的 value 属性值
Options 属性
s-option基本用法。 您可以通过field属性自定义options的别名。
有禁用选项
在
s-option中,设定disabled值为 true,即可禁用该选项
可清空
您可以使用清除图标来清除选择。
为
s-select设置clearable属性,则可将选择器清空。
尺寸
使用
size属性改变选择器大小。 除了默认大小外,还有另外两个选项:large,small。
将选项进行分组
你可以为选项进行分组来区分不同的选项
使用
s-option-group对备选项进行分组,它的 label 属性为分组名
筛选选项
可以利用筛选功能快速查找选项。
为s-select添加filterable属性即可启用搜索功能。 默认情况下,Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑,可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function,它会在输入值发生变化时调用,参数为当前输入值。
远程搜索
输入关键字以从远程服务器中查找数据。
从服务器搜索数据,输入关键字进行查找。为了启用远程搜索,需要将
filterable和remote设置为true,同时传入一个remote-method。remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。 需要注意的是,如果s-option是通过v-for指令渲染出来的,此时需要为s-option添加key属性, 且其值需具有唯一性,比如这个例子中的item.value。
创建新的选项
创建并选中未包含在初始选项中的条目。
通过使用
allow-create属性,用户可以通过输入框创建新项目。 为了使allow-create正常工作,filterable的值必须为true。本例还使用了default-first-option属性, 在该属性为true的情况下,按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位。
空值配置
若想配置如空字符串为有效值而不是空值,可以配置
empty-values为[null, undefined].\如果您想要将清空值更改为
null, 请设置value-on-clear为null