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) 복잡도이므로 큰 데이터 세트의 경우 속도가 느릴 수 있습니다. 이 경우 더 강력한 알고리즘을 사용할 수 있습니다.