下拉选择框

选择器组件用于从选项列表中收集用户提供的信息。

使用

API

组件	描述
v-select	主要组件
v-autocomplete	一个允许进行高级过滤的选择组件
v-combobox	一个允许进行过滤和自定义值的选择组件

注意

DANGER

当使用对象作为 items 属性时，你必须将 item-title 和 item-value 与你对象上的现有属性关联起来。这些值默认为 title 和 value，可以进行更改。

指南

v-select 组件目的在于替代标准的 <select> 元素。它常常和 v-form 以及其他输入控制组件一起使用。

属性

所有的表单输入都有大量的 API，可定制性非常强。

间距

您可以使用 density 属性来调整组件内部的垂直间距。

多选

multiple 属性允许多个选择。

纸片

使用 chips 属性，将选择的内容显示成纸片。

只读

可以在 v-select 上使用 readonly 属性，避免用户修改它的值。

禁用

将 disabled 属性应用于 v-select 将阻止用户与组件交互。

自定义显示值 (title) 和实际值 (value)

你可以自定义选项数组中的显示值和实际值对应的字段。默认情况下是 title 和 value。下面的例子除了使用了自定义显示值和实际值外，还使用了 return-object 属性，可以返回选择项的整个对象。

自定义项目属性

item-title 和 item-value 是为了方便提供的，额外的属性可以通过 item 插槽（见下文）或 itemProps 属性传递给列表项。

与 title 和 value 类似，默认值为 "props"，它将每个项目对象的 props 键中的所有内容传递给列表项。

const items = [
  {
    title: 'John',
    props: { subtitle: 'Engineering' },
  },
]

:item-props="true" 将使用整个项目对象作为 props。这会覆盖 item-title 和 item-value。

const items = [
  {
    title: 'John',
    subtitle: 'Engineering',
  },
]

或者可以将自定义的转换函数传递给 itemProps，以生成每个项目的 props。

查看 VListItem API 以获取可用 props 的列表。

插槽

v-select 组件提供了可以轻松自定义组件的插槽。包括 prepend 和 append 插槽，以及 selection 和 no-data 插槽。

项目

item 插槽用于更改列表中项目的渲染方式。它提供了 item，一个包含转换后的 item-title 和 item-value 的 InternalItem 对象；以及 props，一个包含通常绑定到列表项的 props 和事件的对象。

额外选项

v-select 组件可以选择性地通过前置和后置项进行扩展。这非常适合自定义的 select-all 功能。

选择

selection 插槽可以自定义选择的值如何在输入框内显示。如果你不想输入框因为内容太多变成多行，那这是很好的解决方案。