Cách xóa hàng đã chọn trong v-data-table, Vuetify

Question

Tôi có một ứng dụng Vue mà tôi đang sử dụng v-data-tablevới show-selecttùy chọn. Tôi chỉ muốn xóa dữ liệu đã chọn bằng nút "hủy". Tôi đã có thể xóa tất cả dữ liệu khỏi bảng khi nhấp chuột.

Ví dụ trong hình: Tôi chỉ muốn xóa hàng đã chọn (Bánh mì kem)

Đây là mã của tôi:

Bàn:

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

"nút hủy

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

kịch bản

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

Answer 1

Nếu bạn chỉ muốn bỏ chọn chúng:

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

Nếu bạn muốn xóa chúng:

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

_{Hãy nhớ rằng thuật toán trừ mảng này có độ phức tạp O (n ^ 2), vì vậy đối với các tập dữ liệu lớn, điều này có thể chậm. Trong trường hợp đó, bạn có thể sử dụng một thuật toán mạnh mẽ hơn}