组合框

v-combobox 组件是一个 v-autocomplete ，允许用户输入在提供的 tems 中不存在的值。创建的项目将作为字符串返回。

用例

使用组合框，您可以允许用户创建可能不在提供的项列表中显示的新值。

Combobox（组合框） - 图1

由于 Combobox 允许用户输入，所以它 总是 返回提供给它的完整值（例如，当 Object 的列表时，总是返回一个 Object）。这是因为没有办法区分一个值是用户输入还是对象查询 GitHub问题

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

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

API

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

Combobox（组合框） - 图2

示例

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

多个组合框

以前称为 tags - 允许用户输入多个值

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-combobox
  6.           v-model="select"
  7.           :items="items"
  8.           label="Select a favorite activity or create a new one"
  9.           multiple
  10.         ></v-combobox>
  11.       </v-col>
  12.       <v-col cols="12">
  13.         <v-combobox
  14.           v-model="select"
  15.           :items="items"
  16.           label="I use chips"
  17.           multiple
  18.           chips
  19.         ></v-combobox>
  20.       </v-col>
  21.       <v-col cols="12">
  22.         <v-combobox
  23.           v-model="select"
  24.           :items="items"
  25.           label="I use a scoped slot"
  26.           multiple
  27.           chips
  28.         >
  29.           <template v-slot:selection="data">
  30.             <v-chip
  31.               :key="JSON.stringify(data.item)"
  32.               v-bind="data.attrs"
  33.               :input-value="data.selected"
  34.               :disabled="data.disabled"
  35.               @click:close="data.parent.selectItem(data.item)"
  36.             >
  37.               <v-avatar
  38.                 class="accent white--text"
  39.                 left
  40.                 v-text="data.item.slice(0, 1).toUpperCase()"
  41.               ></v-avatar>
  42.               {{ data.item }}
  43.             </v-chip>
  44.           </template>
  45.         </v-combobox>
  46.       </v-col>
  47.       <v-col cols="12">
  48.         <v-combobox
  49.           v-model="select"
  50.           label="I'm readonly"
  51.           chips
  52.           multiple
  53.           readonly
  54.         ></v-combobox>
  55.       </v-col>
  56.     </v-row>
  57.   </v-container>
  58. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         select: ['Vuetify', 'Programming'],
  6.         items: [
  7.           'Programming',
  8.           'Design',
  9.           'Vue',
  10.           'Vuetify',
  11.         ],
  12.       }
  13.     },
  14.   }
  15. </script>

Combobox（组合框） - 图3

密集

您可以使用 dense 属性来降低组合框的高度并降低列表项的最大高度。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-combobox
  6.           v-model="select"
  7.           :items="items"
  8.           label="Combobox"
  9.           multiple
  10.           outlined
  11.           dense
  12.         ></v-combobox>
  13.       </v-col>
  14.     </v-row>
  15.   </v-container>
  16. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         select: ['Vuetify', 'Programming'],
  6.         items: [
  7.           'Programming',
  8.           'Design',
  9.           'Vue',
  10.           'Vuetify',
  11.         ],
  12.       }
  13.     },
  14.   }
  15. </script>

Combobox（组合框） - 图4

Vuetify Discord

Get help with an issue, report a bug or connect with other developers on Discord

ads by Vuetify

](https://community.vuetifyjs.com?ref=vuetifyjs.com)

没有带纸片的数据

在本例中，我们使用一个自定义的 no-data 插槽在 搜索/创建 项时为用户提供上下文。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-combobox
  4.       v-model="model"
  5.       :items="items"
  6.       :search-input.sync="search"
  7.       hide-selected
  8.       hint="Maximum of 5 tags"
  9.       label="Add some tags"
  10.       multiple
  11.       persistent-hint
  12.       small-chips
  13.     >
  14.       <template v-slot:no-data>
  15.         <v-list-item>
  16.           <v-list-item-content>
  17.             <v-list-item-title>
  18.               No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
  19.             </v-list-item-title>
  20.           </v-list-item-content>
  21.         </v-list-item>
  22.       </template>
  23.     </v-combobox>
  24.   </v-container>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['Gaming', 'Programming', 'Vue', 'Vuetify'],
  5.       model: ['Vuetify'],
  6.       search: null,
  7.     }),
  9.     watch: {
  10.       model (val) {
  11.         if (val.length > 5) {
  12.           this.$nextTick(() => this.model.pop())
  13.         }
  14.       },
  15.     },
  16.   }
  17. </script>

Combobox（组合框） - 图5

高级自定义选项

v-combobox 改进了 v-select 和 v-autocomplete 的功能。这为您提供了一个可扩展的接口来创建真正的自定义实现。这个示例利用了一些更高级的特性，比如自定义filter 算法、内联列表编辑和动态输入项。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-combobox
  4.       v-model="model"
  5.       :filter="filter"
  6.       :hide-no-data="!search"
  7.       :items="items"
  8.       :search-input.sync="search"
  9.       hide-selected
  10.       label="Search for an option"
  11.       multiple
  12.       small-chips
  13.       solo
  14.     >
  15.       <template v-slot:no-data>
  16.         <v-list-item>
  17.           <span class="subheading">Create</span>
  18.           <v-chip
  19.             :color="`${colors[nonce - 1]} lighten-3`"
  20.             label
  21.             small
  22.           >
  23.             {{ search }}
  24.           </v-chip>
  25.         </v-list-item>
  26.       </template>
  27.       <template v-slot:selection="{ attrs, item, parent, selected }">
  28.         <v-chip
  29.           v-if="item === Object(item)"
  30.           v-bind="attrs"
  31.           :color="`${item.color} lighten-3`"
  32.           :input-value="selected"
  33.           label
  34.           small
  35.         >
  36.           <span class="pr-2">
  37.             {{ item.text }}
  38.           </span>
  39.           <v-icon
  40.             small
  41.             @click="parent.selectItem(item)"
  42.           >close</v-icon>
  43.         </v-chip>
  44.       </template>
  45.       <template v-slot:item="{ index, item }">
  46.         <v-text-field
  47.           v-if="editing === item"
  48.           v-model="editing.text"
  49.           autofocus
  50.           flat
  51.           background-color="transparent"
  52.           hide-details
  53.           solo
  54.           @keyup.enter="edit(index, item)"
  55.         ></v-text-field>
  56.         <v-chip
  57.           v-else
  58.           :color="`${item.color} lighten-3`"
  59.           dark
  60.           label
  61.           small
  62.         >
  63.           {{ item.text }}
  64.         </v-chip>
  65.         <v-spacer></v-spacer>
  66.         <v-list-item-action @click.stop>
  67.           <v-btn
  68.             icon
  69.             @click.stop.prevent="edit(index, item)"
  70.           >
  71.             <v-icon>{{ editing !== item ? 'mdi-pencil' : 'mdi-check' }}</v-icon>
  72.           </v-btn>
  73.         </v-list-item-action>
  74.       </template>
  75.     </v-combobox>
  76.   </v-container>
  77. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       activator: null,
  5.       attach: null,
  6.       colors: ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange'],
  7.       editing: null,
  8.       index: -1,
  9.       items: [
  10.         { header: 'Select an option or create one' },
  11.         {
  12.           text: 'Foo',
  13.           color: 'blue',
  14.         },
  15.         {
  16.           text: 'Bar',
  17.           color: 'red',
  18.         },
  19.       ],
  20.       nonce: 1,
  21.       menu: false,
  22.       model: [
  23.         {
  24.           text: 'Foo',
  25.           color: 'blue',
  26.         },
  27.       ],
  28.       x: 0,
  29.       search: null,
  30.       y: 0,
  31.     }),
  33.     watch: {
  34.       model (val, prev) {
  35.         if (val.length === prev.length) return
  37.         this.model = val.map(v => {
  38.           if (typeof v === 'string') {
  39.             v = {
  40.               text: v,
  41.               color: this.colors[this.nonce - 1],
  42.             }
  44.             this.items.push(v)
  46.             this.nonce++
  47.           }
  49.           return v
  50.         })
  51.       },
  52.     },
  54.     methods: {
  55.       edit (index, item) {
  56.         if (!this.editing) {
  57.           this.editing = item
  58.           this.index = index
  59.         } else {
  60.           this.editing = null
  61.           this.index = -1
  62.         }
  63.       },
  64.       filter (item, queryText, itemText) {
  65.         if (item.header) return false
  67.         const hasValue = val => val != null ? val : ''
  69.         const text = hasValue(itemText)
  70.         const query = hasValue(queryText)
  72.         return text.toString()
  73.           .toLowerCase()
  74.           .indexOf(query.toString().toLowerCase()) > -1
  75.       },
  76.     },
  77.   }
  78. </script>

Combobox（组合框） - 图6