Question

我们如何选择所有选项来选择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

EDIT v1.2 Vuetify添加了prepend-item广告位，可让您在列出商品之前添加自定义商品。

可以使用前置和附加项目选择性地扩展v-select组件。这非常适合自定义全选功能。

<强> 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

如何选择＆＃34;全选＆＃34; v-select或v-combobox上的选项？

1 个答案: