选择器

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

用例

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row align="center">
  4.       <v-col class="d-flex" cols="12" sm="6">
  5.         <v-select
  6.           :items="items"
  7.           label="Standard"
  8.         ></v-select>
  9.       </v-col>
  11.       <v-col class="d-flex" cols="12" sm="6">
  12.         <v-select
  13.           :items="items"
  14.           filled
  15.           label="Filled style"
  16.         ></v-select>
  17.       </v-col>
  19.       <v-col class="d-flex" cols="12" sm="6">
  20.         <v-select
  21.           :items="items"
  22.           label="Outlined style"
  23.           outlined
  24.         ></v-select>
  25.       </v-col>
  27.       <v-col class="d-flex" cols="12" sm="6">
  28.         <v-select
  29.           :items="items"
  30.           label="Solo field"
  31.           solo
  32.         ></v-select>
  33.       </v-col>
  34.     </v-row>
  35.   </v-container>
  36. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.     }),
  6.   }
  7. </script>

Selects（选择器） - 图1

在为 items 属性使用对象时，您必须将 item-text 和 item-value 与对象上的现有属性关联。这些值默认为 text 和 value，可以更改。

menu-props 的 auto 属性只支持默认输入样式。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Selects（选择器） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center" justify="space-around">
  3.     <v-switch v-model="disabled" class="ma-2" label="Disabled"></v-switch>
  4.     <v-switch v-model="readonly" class="ma-2" label="Readonly"></v-switch>
  5.     <v-switch v-model="chips" class="ma-2" label="Chips"></v-switch>
  6.     <v-switch v-model="multiple" class="ma-2" label="Multiple"></v-switch>
  7.     <v-switch v-model="appendIcon" class="ma-2" label="Append icon"></v-switch>
  8.     <v-switch v-model="appendSlot" class="ma-2" label="Append slot"></v-switch>
  9.     <v-switch v-model="appendItemSlot" class="ma-2" label="Append item slot"></v-switch>
  10.     <v-switch v-model="prependIcon" class="ma-2" label="Prepend icon"></v-switch>
  11.     <v-switch v-model="prependSlot" class="ma-2" label="Prepend slot"></v-switch>
  12.     <v-switch v-model="prependItemSlot" class="ma-2" label="Prepend item slot"></v-switch>
  13.     <v-switch v-model="selectSlot" class="ma-2" label="Selection slot"></v-switch>
  14.     <v-col cols="12">
  15.       <v-select
  16.         v-model="model"
  17.         :items="items"
  18.         :disabled="disabled"
  19.         :readonly="readonly"
  20.         :chips="chips"
  21.         :multiple="multiple"
  22.         :append-icon="appendIcon ? 'mdi-plus' : ''"
  23.         :prepend-icon="prependIcon ? 'mdi-minus' : ''"
  24.         label="Label"
  25.       >
  26.         <v-icon v-if="appendSlot" slot="append" color="green">mdi-plus</v-icon>
  27.         <v-icon v-if="prependSlot" slot="prepend" color="red">mdi-minus</v-icon>
  28.         <v-icon v-if="appendItemSlot" slot="append-item">mdi-contain-end</v-icon>
  29.         <v-icon v-if="prependItemSlot" slot="prepend-item">mdi-contain-start</v-icon>
  30.         <template v-if="selectSlot" v-slot:selection="{ item, index }">
  31.           <v-chip v-if="index === 0">
  32.             <span>{{ item }}</span>
  33.           </v-chip>
  34.           <span
  35.             v-if="index === 1"
  36.             class="grey--text caption"
  37.           >(+{{ model.length - 1 }} others)</span>
  38.         </template>
  39.       </v-select>
  40.     </v-col>
  41.   </v-row>
  42. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.       disabled: false,
  6.       readonly: false,
  7.       chips: false,
  8.       multiple: false,
  9.       appendIcon: false,
  10.       appendSlot: false,
  11.       appendItemSlot: false,
  12.       prependIcon: false,
  13.       prependSlot: false,
  14.       prependItemSlot: false,
  15.       selectSlot: false,
  16.       model: 'Foo',
  17.     }),
  19.     watch: {
  20.       multiple (val) {
  21.         if (val) this.model = [this.model]
  22.         else this.model = this.model[0] || 'Foo'
  23.       },
  24.     },
  25.   }
  26. </script>

Selects（选择器） - 图3

浏览器自动完成默认设置为关闭，可能因浏览器而异，可能会被忽略。MDN

示例

下面是一些简单到复杂的例子。

禁用

您不能使用禁用的 v-select。

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-col cols="12">
  4.       <v-select
  5.         :items="items"
  6.         disabled
  7.         label="Disabled"
  8.       ></v-select>
  9.     </v-col>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.     }),
  6.   }
  7. </script>

Selects（选择器） - 图4

只读

您不能使用只读的 v-select，但它看起来是默认的。

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-col cols="12">
  4.       <v-select
  5.         :items="items"
  6.         readonly
  7.         label="Read-only"
  8.       ></v-select>
  9.     </v-col>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.     }),
  6.   }
  7. </script>

Selects（选择器） - 图5

浅色主题

标准的单选有多种配置选项

template script

  1. <template>
  2.   <v-card>
  3.     <v-container fluid>
  4.       <v-row
  5.         align="center"
  6.       >
  7.         <v-col cols="12" sm="6">
  8.           <v-select
  9.             v-model="value"
  10.             :items="items"
  11.             attach
  12.             chips
  13.             label="Chips"
  14.             multiple
  15.           ></v-select>
  16.         </v-col>
  17.         <v-col cols="12" sm="6">
  18.           <v-select
  19.             v-model="value"
  20.             :items="items"
  21.             filled
  22.             chips
  23.             label="Chips"
  24.             multiple
  25.           ></v-select>
  26.         </v-col>
  27.         <v-col cols="12" sm="6">
  28.           <v-select
  29.             v-model="value"
  30.             :items="items"
  31.             chips
  32.             label="Chips"
  33.             multiple
  34.             outlined
  35.           ></v-select>
  36.         </v-col>
  37.         <v-col cols="12" sm="6">
  38.           <v-select
  39.             v-model="value"
  40.             :items="items"
  41.             chips
  42.             label="Chips"
  43.             multiple
  44.             solo
  45.           ></v-select>
  46.         </v-col>
  47.       </v-row>
  48.     </v-container>
  49.   </v-card>
  50. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['foo', 'bar', 'fizz', 'buzz'],
  5.       value: ['foo', 'bar', 'fizz', 'buzz'],
  6.     }),
  7.   }
  8. </script>

Selects（选择器） - 图6

图标

使用自定义前置或者后置图标。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row align="center">
  4.       <v-col cols="6">
  5.         <v-subheader>Prepended icon</v-subheader>
  6.       </v-col>
  7.       <v-col cols="6">
  8.         <v-select
  9.           v-model="e1"
  10.           :items="states"
  11.           menu-props="auto"
  12.           label="Select"
  13.           hide-details
  14.           prepend-icon="map"
  15.           single-line
  16.         ></v-select>
  17.       </v-col>
  18.       <v-col cols="6">
  19.         <v-subheader>Appended icon</v-subheader>
  20.       </v-col>
  21.       <v-col cols="6">
  22.         <v-select
  23.           v-model="e2"
  24.           :items="states"
  25.           append-outer-icon="map"
  26.           menu-props="auto"
  27.           hide-details
  28.           label="Select"
  29.           single-line
  30.         ></v-select>
  31.       </v-col>
  32.     </v-row>
  33.   </v-container>
  34. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e1: 'Florida',
  6.         e2: 'Texas',
  7.         e3: null,
  8.         e4: null,
  9.         items: [
  10.           { text: 'State 1' },
  11.           { text: 'State 2' },
  12.           { text: 'State 3' },
  13.           { text: 'State 4' },
  14.           { text: 'State 5' },
  15.           { text: 'State 6' },
  16.           { text: 'State 7' },
  17.         ],
  18.         states: [
  19.           'Alabama', 'Alaska', 'American Samoa', 'Arizona',
  20.           'Arkansas', 'California', 'Colorado', 'Connecticut',
  21.           'Delaware', 'District of Columbia', 'Federated States of Micronesia',
  22.           'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
  23.           'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
  24.           'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
  25.           'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
  26.           'Missouri', 'Montana', 'Nebraska', 'Nevada',
  27.           'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
  28.           'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
  29.           'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
  30.           'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
  31.           'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
  32.           'Washington', 'West Virginia', 'Wisconsin', 'Wyoming',
  33.         ],
  34.       }
  35.     },
  36.   }
  37. </script>

Selects（选择器） - 图7

多选

多选择器可以使用 v-chip 组件来显示已选项。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row align="center">
  4.       <v-col cols="12" sm="6">
  5.         <v-subheader v-text="'Multiple with persistent hint'"></v-subheader>
  6.       </v-col>
  7.       <v-col cols="12" sm="6">
  8.         <v-select
  9.           v-model="e6"
  10.           :items="states"
  11.           :menu-props="{ maxHeight: '400' }"
  12.           label="Select"
  13.           multiple
  14.           hint="Pick your favorite states"
  15.           persistent-hint
  16.         ></v-select>
  17.       </v-col>
  19.       <v-col cols="12" sm="6">
  20.         <v-subheader v-text="'Multiple (Chips) with persistent hint'"></v-subheader>
  21.       </v-col>
  23.       <v-col cols="12" sm="6">
  24.         <v-select
  25.           v-model="e7"
  26.           :items="states"
  27.           label="Select"
  28.           multiple
  29.           chips
  30.           hint="What are the target regions"
  31.           persistent-hint
  32.         ></v-select>
  33.       </v-col>
  34.     </v-row>
  35.   </v-container>
  36. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e6: [],
  6.         e7: [],
  7.         states: [
  8.           'Alabama', 'Alaska', 'American Samoa', 'Arizona',
  9.           'Arkansas', 'California', 'Colorado', 'Connecticut',
  10.           'Delaware', 'District of Columbia', 'Federated States of Micronesia',
  11.           'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
  12.           'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
  13.           'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
  14.           'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
  15.           'Missouri', 'Montana', 'Nebraska', 'Nevada',
  16.           'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
  17.           'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
  18.           'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
  19.           'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
  20.           'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
  21.           'Washington', 'West Virginia', 'Wisconsin', 'Wyoming',
  22.         ],
  23.       }
  24.     },
  25.   }
  26. </script>

Selects（选择器） - 图8

Black Vuetify Cap

An updated classic that won’t break the bank! This hat perfectly combines style and function.

ads by Vuetify

](https://store.vuetifyjs.com/product/black-vuetify-logo-cap?ref=vuetifyjs.com)

密集

您可以使用 dense 属性来降低字段高度和列表项的最大高度。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row align="center">
  4.       <v-col class="d-flex" cols="12" sm="6">
  5.         <v-select
  6.           :items="items"
  7.           label="Standard"
  8.           dense
  9.         ></v-select>
  10.       </v-col>
  12.       <v-col class="d-flex" cols="12" sm="6">
  13.         <v-select
  14.           :items="items"
  15.           filled
  16.           label="Filled style"
  17.           dense
  18.         ></v-select>
  19.       </v-col>
  21.       <v-col class="d-flex" cols="12" sm="6">
  22.         <v-select
  23.           :items="items"
  24.           label="Outlined style"
  25.           dense
  26.           outlined
  27.         ></v-select>
  28.       </v-col>
  30.       <v-col class="d-flex" cols="12" sm="6">
  31.         <v-select
  32.           :items="items"
  33.           label="Solo field"
  34.           dense
  35.           solo
  36.         ></v-select>
  37.       </v-col>
  38.     </v-row>
  39.   </v-container>
  40. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.     }),
  6.   }
  7. </script>

Selects（选择器） - 图9

自定义选项的文本和值

你可以指定选项数组中的文本与值字段对应的特定属性，在默认情况下是 text 和 value。在这个例子中，我们也可以用 return-object 属性来返回被选中的对象。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row align="center">
  4.       <v-col cols="6">
  5.         <v-subheader>Custom items</v-subheader>
  6.       </v-col>
  8.       <v-col cols="6">
  9.         <v-select
  10.           v-model="select"
  11.           :hint="`${select.state}, ${select.abbr}`"
  12.           :items="items"
  13.           item-text="state"
  14.           item-value="abbr"
  15.           label="Select"
  16.           persistent-hint
  17.           return-object
  18.           single-line
  19.         ></v-select>
  20.       </v-col>
  21.     </v-row>
  22.   </v-container>
  23. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         select: { state: 'Florida', abbr: 'FL' },
  6.         items: [
  7.           { state: 'Florida', abbr: 'FL' },
  8.           { state: 'Georgia', abbr: 'GA' },
  9.           { state: 'Nebraska', abbr: 'NE' },
  10.           { state: 'California', abbr: 'CA' },
  11.           { state: 'New York', abbr: 'NY' },
  12.         ],
  13.       }
  14.     },
  15.   }
  16. </script>

Selects（选择器） - 图10

自定义菜单属性

自定义属性可以使用 menuProps 属性直接传递给 v-menu。 在此示例中，菜单被强制指向顶部并转移到顶部。

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-col cols="12">
  4.       <v-select
  5.         :items="items"
  6.         :menu-props="{ top: true, offsetY: true }"
  7.         label="Label"
  8.       ></v-select>
  9.     </v-col>
  10.   </v-row>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  5.     }),
  6.   }
  7. </script>

Selects（选择器） - 图11

预留/附加 项目插槽

v-select 组件可以有选择地扩展，带有前缀和附加项。这是完美的定制 select-all 功能。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-select
  4.       v-model="selectedFruits"
  5.       :items="fruits"
  6.       label="Favorite Fruits"
  7.       multiple
  8.     >
  9.       <template v-slot:prepend-item>
  10.         <v-list-item
  11.           ripple
  12.           @click="toggle"
  13.         >
  14.           <v-list-item-action>
  15.             <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
  16.           </v-list-item-action>
  17.           <v-list-item-content>
  18.             <v-list-item-title>Select All</v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.         <v-divider class="mt-2"></v-divider>
  22.       </template>
  23.       <template v-slot:append-item>
  24.         <v-divider class="mb-2"></v-divider>
  25.         <v-list-item disabled>
  26.           <v-list-item-avatar color="grey lighten-3">
  27.             <v-icon>mdi-food-apple</v-icon>
  28.           </v-list-item-avatar>
  30.           <v-list-item-content v-if="likesAllFruit">
  31.             <v-list-item-title>Holy smokes, someone call the fruit police!</v-list-item-title>
  32.           </v-list-item-content>
  34.           <v-list-item-content v-else-if="likesSomeFruit">
  35.             <v-list-item-title>Fruit Count</v-list-item-title>
  36.             <v-list-item-subtitle>{{ selectedFruits.length }}</v-list-item-subtitle>
  37.           </v-list-item-content>
  39.           <v-list-item-content v-else>
  40.             <v-list-item-title>
  41.               How could you not like fruit?
  42.             </v-list-item-title>
  43.             <v-list-item-subtitle>
  44.               Go ahead, make a selection above!
  45.             </v-list-item-subtitle>
  46.           </v-list-item-content>
  47.         </v-list-item>
  48.       </template>
  49.     </v-select>
  50.   </v-container>
  51. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       fruits: [
  5.         'Apples',
  6.         'Apricots',
  7.         'Avocado',
  8.         'Bananas',
  9.         'Blueberries',
  10.         'Blackberries',
  11.         'Boysenberries',
  12.         'Bread fruit',
  13.         'Cantaloupes (cantalope)',
  14.         'Cherries',
  15.         'Cranberries',
  16.         'Cucumbers',
  17.         'Currants',
  18.         'Dates',
  19.         'Eggplant',
  20.         'Figs',
  21.         'Grapes',
  22.         'Grapefruit',
  23.         'Guava',
  24.         'Honeydew melons',
  25.         'Huckleberries',
  26.         'Kiwis',
  27.         'Kumquat',
  28.         'Lemons',
  29.         'Limes',
  30.         'Mangos',
  31.         'Mulberries',
  32.         'Muskmelon',
  33.         'Nectarines',
  34.         'Olives',
  35.         'Oranges',
  36.         'Papaya',
  37.         'Peaches',
  38.         'Pears',
  39.         'Persimmon',
  40.         'Pineapple',
  41.         'Plums',
  42.         'Pomegranate',
  43.         'Raspberries',
  44.         'Rose Apple',
  45.         'Starfruit',
  46.         'Strawberries',
  47.         'Tangerines',
  48.         'Tomatoes',
  49.         'Watermelons',
  50.         'Zucchini',
  51.       ],
  52.       selectedFruits: [],
  53.     }),
  55.     computed: {
  56.       likesAllFruit () {
  57.         return this.selectedFruits.length === this.fruits.length
  58.       },
  59.       likesSomeFruit () {
  60.         return this.selectedFruits.length > 0 && !this.likesAllFruit
  61.       },
  62.       icon () {
  63.         if (this.likesAllFruit) return 'mdi-close-box'
  64.         if (this.likesSomeFruit) return 'mdi-minus-box'
  65.         return 'mdi-checkbox-blank-outline'
  66.       },
  67.     },
  69.     methods: {
  70.       toggle () {
  71.         this.$nextTick(() => {
  72.           if (this.likesAllFruit) {
  73.             this.selectedFruits = []
  74.           } else {
  75.             this.selectedFruits = this.fruits.slice()
  76.           }
  77.         })
  78.       },
  79.     },
  80.   }
  81. </script>

Selects（选择器） - 图12

更改选择器外观

selection 插槽可用于自定义所选值在输入中的显示方式。 当您想要 foo (+20 others) 之类的东西或者不希望选择占据多行时，这是很棒的。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-select
  4.       v-model="value"
  5.       :items="items"
  6.       label="Select Item"
  7.       multiple
  8.     >
  9.       <template v-slot:selection="{ item, index }">
  10.         <v-chip v-if="index === 0">
  11.           <span>{{ item }}</span>
  12.         </v-chip>
  13.         <span
  14.           v-if="index === 1"
  15.           class="grey--text caption"
  16.         >(+{{ value.length - 1 }} others)</span>
  17.       </template>
  18.     </v-select>
  19.   </v-container>
  20. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['foo', 'bar', 'fizz', 'buzz', 'fizzbuzz', 'foobar'],
  5.       value: ['foo', 'bar', 'fizz'],
  6.     }),
  7.   }
  8. </script>

Selects（选择器） - 图13