如何在 v-select 或 v-combobox 上设置 "select all" 选项？

Question

我们如何拥有 select all 选项来 selecting v-select 或 v-combobox 中的所有内容？

Answer 1

Vuetify 没有 Select all v-select 选项。但是，您可以使用按钮和方法来完成自己的工作。

像这样：

JS

methods: {
    selectAll(){
      // Copy all v-select's items in your selectedItem array
      this.yourVSelectModel = [...this.vSelectItems]
    }
}

HTML

<v-btn @click="selectAll">Select all</v-btn>

CodePen with SelectAll Button

编辑 v1.2 Vuetify 添加了 prepend-item 插槽，让您可以在列出项目之前添加自定义项目。

The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.

HTML

<v-select
  v-model="selectedFruits"
  :items="fruits"
  label="Favorite Fruits"
  multiple
>
  <!-- Add a tile with Select All as Lalbel and binded on a method that add or remove all items -->
  <v-list-tile
    slot="prepend-item"
    ripple
    @click="toggle"
  >
    <v-list-tile-action>
      <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
    </v-list-tile-action>
    <v-list-tile-title>Select All</v-list-tile-title>
  </v-list-tile>
  <v-divider
    slot="prepend-item"
    class="mt-2"
  />
</v-select>

JS

computed: {
  likesAllFruit () {
    return this.selectedFruits.length === this.fruits.length
  },
  likesSomeFruit () {
    return this.selectedFruits.length > 0 && !this.likesAllFruit
  },
  icon () {
    if (this.likesAllFruit) return 'mdi-close-box'
    if (this.likesSomeFruit) return 'mdi-minus-box'
    return 'mdi-checkbox-blank-outline'
  }
},

methods: {
  toggle () {
    this.$nextTick(() => {
      if (this.likesAllFruit) {
        this.selectedFruits = []
      } else {
        this.selectedFruits = this.fruits.slice()
      }
    })
  }
}

Code Pen with Select All prepend item

Vuetify Doc about Prepend and Append Slots in v-select

Answer 2

如果您想在 v-select 中添加“全部”选项。你可以这样做：

<v-select
   :items='[{text: "--ALL--", value:""}, ...myItems]'
    label='Select an item'
              outlined
></v-select>

如何在 v-select 或 v-combobox 上设置 "select all" 选项？

How to have a "select all" option on a v-select or v-combobox?

vuejs2

vuetify.js