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

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

---

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

带有选择所有前置项目的代码笔

关于 v-select 中前置和附加插槽的 Vuetify 文档

Answer 2

**HTML template**
   <v-select
     v-model="selectedItem"
     :items="items"
     item-text="name"
     item-value="id"
     hide-details
     multiple
     @change="handleSelectItem($event)">
      <v-checkbox>
       @change="handleSelectAllItems"
       v-model="selectAll"
       slot="prepend-item"
       hide-details
       label="Select All"
      />
     </v-checkbox>
    </v-select>

脚本标签

data() {
  selectAll: false,
  selectedItem: [],
  items: [
    {
      _id: 1,
      name: 'item1'
    },
    {
      _id: 2,
      name: 'item2'
    }
  ]
},
methods:{
    handleBondExpensesRequests() {
      this.selectAll = !!(
        this.selectedItem.length == this.items.length
      )
    },
    handleSelectAll(val) {
      this.selectedItem = val ? this.items : []
    }
 }

Answer 3

Vue 3，但具有相同的想法，如下所示：

<template>
  <v-col cols="12" md="6" class="filter-select py-0 py-md-3 px-lg-6">
    <v-select
      chips
      multiple
      clearable
      density="default"
      variant="underlined"
      v-model="selList"
      :items="tplList"
      return-object
    >
      <template v-slot:prepend-item>
        <v-checkbox
          class="ml-4 text-body-2"
          v-model="isSelectAll"
          @click="toggleSelectAll"
          hide-details
          ripple
        >
          <template v-slot:label>
            <span class="text-body-2"> Select All </span>
          </template>
        </v-checkbox>
        <v-divider />
      </template>
      <template v-slot:label>
        <div>
          <v-icon class="mr-2">{{ icon }}</v-icon>
          <span>{{ label }}</span>
        </div>
      </template>
    </v-select>
  </v-col>
</template>

<script setup>
import { computed } from "vue";
const { filter } = defineProps([
  'selList', //checklist selected items
  'tplList', //checklist template items
  'icon',
  'label',
]);
const isSelectAll = computed(
  () => selList.length > 0 && selList.length === tplList.length
);
const toggleSelectAll = () => {
  !isSelectAll.value
    ? selList.splice(0, selList.length, ...tplList)
    : (selList = []);
};
</script>

Answer 4

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

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