时间戳

首页 > 解决方案 > 如何在 v-select 或 v-combobox 上有“全选”选项？

vuejs2 - 如何在 v-select 或 v-combobox 上有“全选”选项？

问题描述

我们如何有一个全选选项来选择 av-select或 a中的所有内容v-combobox？

标签： vuejs2vuetify.js

解决方案

VuetifySelect 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

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()
      }
    })
  }
}

带有全选前置项目的代码笔

Vuetify Doc 关于在 v-select 中添加和添加插槽

推荐阅读