Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
TIP
g-select 的默认宽度更改为 100% 当使用内联形式时，宽度将显示异常。 为了保持显示正常, 您需要手动配置 g-select 的宽度 (如: 例子).
基础用法
有禁用选项
禁用状态
禁用整个选择器组件
可清空单选
您可以使用清除图标来清除选择。
基础多选
多选选择器使用 tag 组件来展示已选中的选项。
自定义模板
你可以自定义如何来渲染每一个选项。
自定义下拉菜单的头部
您可以自定义下拉菜单的头部。
自定义下拉菜单的底部
您可以自定义下拉菜单的底部。
将选项进行分组
你可以为选项进行分组来区分不同的选项
筛选选项
可以利用筛选功能快速查找选项。
远程搜索
输入关键字以从远程服务器中查找数据。
创建新的选项
创建并选中未包含在初始选项中的条目。
使用值键 value-key 属性
如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。
自定义标签
您可以自定义标签。
自定义加载
修改加载区域内容
空值配置
若想配置如空字符串为有效值而不是空值，可以配置 empty-values 为 [null, undefined].
如果您想要将清空值更改为 null, 请设置 value-on-clear 为 null
自定义标签
您可以自定义标签
Select API
Select Attributes
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string / number / boolean / object / array | — |
| disabled | 是否禁用 | boolean | false |
| clearable | 是否可以清空选项 | boolean | false |
| placeholder | 占位符，默认为“Select” | string | — |
Select Events
| 事件名 | 说明 | Type |
|---|---|---|
| change | 选中值发生变化时触发 | Function (value: any) => void |
Select Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | option 组件列表 | Option Group / Option |
Option Group API
Option Group Attributes
| 插槽名 | 说明 | Type | Default |
|---|---|---|---|
| label | 分组的名称 | string | — |
| disabled | 是否将该分组下所有选项置为禁用 | boolean | false |
Option Group Slots
| 属性名 | 说明 | Subtags |
|---|---|---|
| default | 自定义默认内容 | Option |
Option API
Option Attributes
| 属性名 | 说明 | Type | Default |
|---|---|---|---|
| value | 选项的值 | string / number / boolean / object | — |
| label | 选项的标签，若不设置则默认与value相同 | string / number | — |
| disabled | 是否禁用该选项 | boolean | false |
Option Slots
| Name | 说明 |
|---|---|
| default | 默认插槽内容 |