v-data-table, Vuetify에서 선택한 행을 지우는 방법

Nov 13 2020

옵션 v-data-table과 함께 사용중인 Vue 앱 이 show-select있습니다. "취소"버튼을 사용하여 선택한 데이터 만 삭제하고 싶습니다. 이미 onclick 테이블에서 모든 데이터를 지울 수 있습니다.

그림의 예 : 선택한 행만 지우고 싶습니다 (아이스크림 샌드위치)

내 코드는 다음과 같습니다.

표:

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  :single-select="singleSelect"
  item-key="name"
  show-select
  class="elevation-1"
>
  <template v-slot:top>
    <v-switch
      v-model="singleSelect"
      label="Single select"
      class="pa-3"
    ></v-switch>
  </template>
</v-data-table>

"취소"버튼

<v-btn class="ma-2" color="primary" @click="cancel"> Cancel </v-btn>

스크립트

cancel() {
   this.desserts = [];
},

답변

1 Dan Nov 13 2020 at 09:51

선택을 취소하려는 경우 :

cancel() {
   this.selected = [];
}

제거하려는 경우 :

cancel() {
  this.desserts = this.desserts.filter(item => {
    return this.selected.indexOf(item) < 0;
  });
}

이 배열 빼기 알고리즘은 O (n ^ 2) 복잡도이므로 큰 데이터 세트의 경우 속도가 느릴 수 있습니다. 이 경우 더 강력한 알고리즘을 사용할 수 있습니다.