Skip to content

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,它会在输入值发生变化时调用,参数为当前输入值。

远程搜索

输入关键字以从远程服务器中查找数据。

从服务器搜索数据,输入关键字进行查找。为了启用远程搜索,需要将 filterableremote 设置为 true,同时传入一个 remote-methodremote-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-clearnull