QSelect Vue组件有两种选择-单个或多个。 该组件为选择列表和操作打开菜单。 对于更长的列表, 可以使用过滤器。
如果您要查找下拉式“按钮”而不是“输入”，请改用按钮下拉。
QSelect API
设计
总览
WARNING
对于您的QSelect，您只能使用一种主要设计（filled, outlined, standout, borderless）。 您不能使用多个，因为它们是专有的。
装饰器
着色
可清除
作为辅助，您可以使用clearable属性，以便用户可以通过附加的图标将模型重置为null。 在下面的示例中，第二个QSelect相当于使用clearable。
禁用和只读
QBtn类型为“submit”的插槽
WARNING
当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时，您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。
菜单过渡
WARNING
请注意，在使用options-cover属性时，过渡功能不起作用。
在下面的示例中，展示了一些过渡。 有关可用过渡的完整列表，请转到过渡。
选项列表显示模式
默认情况下，QSelect将选项列表显示为桌面设备上的菜单和移动设备上的对话框。 您可以通过使用behavior属性来强制一种行为。
WARNING
请注意，在iOS菜单上，行为可能会产生问题，尤其是在与use-input属性结合使用时。 您可以使用有条件的behavior属性，例如:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"以仅在iOS上使用对话模式。
模型
WARNING
单一选择的模型可以是任何内容（字符串、对象等），而多重选择的模型则必须是数组。
您可以在下面的“选项”部分中了解可以影响模型内容的emit-value属性。
选项
选项类型
影响模型
当使用emit-value时，模型从指定的选定选项变为确定的value。 默认是发出整个选项。 仅当选项为“对象”形式时才使用它。
当使用map-options时，模型只能包含value，并且将与选项映射以确定其标签。 涉及性能损失，因此仅在绝对必要时使用它。 例如，如果模型包含整个对象（因此包含标签属性），则不需要它。
自定义属性名称
默认情况下，QSelect会查看选项数组对象中每个选项的label、value、disable和sanitize属性。 但是您可以覆盖那些内容：
WARNING
如果将函数用于自定义属性，请始终检查选项是否为null。 这些函数既用于列表中的选项，也用于选定的选项。
自定义菜单选项
WARNING
选项列表是使用virtual scroll呈现的，因此如果为一个选项呈现多个元素，则必须在除第一个元素外的所有元素上设置q-virtual-scroll--with-prev类。
这是另一个示例，其中我们向每个选项添加QToggle。 可能性是无止境的。
默认情况下，当没有选项时，菜单不会出现。 但是您可以自定义此情况并指定菜单应显示的内容。
延迟加载
下面的示例简要介绍了如何延迟加载选项。 这意味着，与许多其他事情一样，首次渲染不需要options属性。
当滚动到末尾时，可以动态加载新选项：
封面模式
显示值
过滤和自动完成
带有use-input的原生属性
QSelect上所有未在API属性列表中设置的属性都将传递到使用的原生输入字段（请首先检查use-input属性描述以了解其作用）以进行过滤/自动完成/添加新值。 例如：autocomplete, placeholder。
更多信息: 原生输入组件属性.
创建新值
TIP
以下只是一些示例，可帮助您开始进行自己的QSelect行为。 这不是QSelect提供的可能性的详尽列表。
将此功能与use-input属性一起使用是有意义的。
为了启用新值的创建，您需要要么指定new-value-mode属性和/或侦听@new-value事件。 如果您两者都使用，那么在您的自定义情景中，侦听@new-value的目的仅仅是覆盖new-value-mode。
new-value-mode属性
new-value-mode属性值指定了应如何添加值：add（即使有重复，也要添加一个值）、add-unique（只有不重复时才有添加）或toggle（如果尚未在模型中则添加值，否则将其删除）。
通过使用此属性，您无需监听@new-value事件，除非您为了一些特定的情况要覆盖其行为。
@new-value事件
发出@new-value事件，并带上要添加的值和一个done回调函数。 done回调函数具有两个可选的参数： - 要添加的值 - 行为（与new-value-mode属性的值相同，并且在指定时会覆盖此属性——如果使用了它）——默认行为（如果未使用new-value-mode） 会添加值，即使它是重复的
不带任何参数调用done()只是清空输入框的值，而不会以任何方式篡改模型。
使用菜单和过滤
过滤并将新值添加到菜单：
过滤新值（在下面的示例中，要添加的值至少需要传递3个字符），并且不会添加到菜单中：
从input生成多个值：
安全处理
默认情况下，所有选项（包括选定的选项）都是经过安全处理的。这意味着以HTML格式显示它们是无效的。然而，如果你需要在你的选项上显示HTML，并且你相信它们的内容，那么有几种方法可以做到这一点。
您可以通过以下方式强制使用菜单选项的HTML形式：
- 将受信任的选项的
html键设置为true（用于特定的受信任的选项） - 或通过设置QSelect的
options-html属性（对于所有选项）
QSelect的显示值会以HTML形式显示，如果：
- 设置了QSelect的
display-value-html属性 - 或者您不使用
display-value和- 设置了QSelect的
options-html属性 - 任何选定的选项都将
html键设置为true
- 设置了QSelect的
WARNING
如果您使用selected或selected-item插槽，则您负责对显示值进行安全处理。 display-value-html属性将不适用。
渲染性能
除非在大型集合上使用map-options，否则渲染性能不太受选项数量的影响。 请注意，无限滚动在工作，当用户滚动列表时，它会渲染其他选项。
TIP
- (Composition API) 为了在使用大量选项时获得最佳性能，不要用ref()/computed()/reactive()/etc.来包装你在
options属性中传递的数组。这允许Vue跳过使列表对更改作出响应的特性。 - (Options API) 为了在使用大量选项的同时获得最佳性能，请使用
Object.freeze(options)冻结传递给options属性的数组。这允许Vue跳过使列表对更改作出响应的特性。
键盘导航
当QSelect被聚焦时：
- 按ENTER、ARROW DOWN（如果未设置
use-input，则按SPACE）将打开选项列表 - 如果设置了
use-chips：- 按下SHIFT + TAB将在QChips中向后导航（如果选择了QChip，TAB将在QChips中向前导航）
- 选择QChip时按ENTER将从选择中删除该选项
- 按BACKSPACE将从选择中删除最后一个选项（当设置了
use-input时，输入应为空）
- 按TAB（如果未设置
use-chips或选择了第一个QChip，则按SHIFT + TAB）将导航至下一个或页面上的上一个可聚焦元素 - 如果未设置
use-input，则键入文本（0 - 9 or A - Z将：- 创建一个搜索缓冲区（当在1.5秒内未输入新键时将重置），该缓冲区将用于在选项标签中进行搜索
- 如果多次键入缓冲区中的第一个键，则选择以该字母开头的下一个选项（在当前焦点之后）
- 选择与键入的文本匹配的下一个选项（从当前的焦点开始）（匹配是模糊的-选项标签应以第一个字母开头并包含所有字母）
当选项列表打开时：
- 按ARROW UP或ARROW DOWN将在选项列表中向上或向下导航
- 按PAGE UP或PAGE DOWN将在选项列表中向上或向下导航一页
- 按HOME或END 将导航到选项列表的开头或结尾（仅当您未使用
use-input或输入为空时） - 使用箭头键进行导航时，导航将在到达列表的开头或结尾时结束
- 选项在列表中被选中时按ENTER（如果未设置
use-input，则按SPACE；如果未设置multiple，则按TAB）将：- 选择选项，并且如果未设置
multiple则关闭选项列表 - 如果设置了
multiple，则切换选项
- 选择选项，并且如果未设置
原生表单提交
当处理具有action和method的原生形式时（例如，使用Quasar和ASP.NET控制器），则需要在QSelect上指定name属性，否则formData将不包含它（如果应该的话）- 所有值都转换为字符串（本地行为，因此不要使用对象值）：