v-select 또는 v-comobox에서 "모두 선택" 옵션을 사용하는 방법

v-select 또는 v-comobox에서 "모두 선택" 옵션을 사용하는 방법

모든 항목을 선택하기 위한 모든 선택 옵션을 어떻게 가지고 있는가?v-select또는 av-combobox?

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 버튼

---

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 prefend 항목

v-select에서 슬롯 사전 설정 및 추가에 대한 설명

v-select에 "ALL" 옵션을 추가하려면 다음과 같이 하십시오.다음과 같은 방법으로 할 수 있다.

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

참조URL: https://stackoverflow.com/questions/50560020/how-to-have-a-select-all-option-on-a-v-select-or-v-combobox