如何清除v-data-table，Vuetify中的选定行 [英] How to clear selected row in v-data-table, Vuetify

问题描述

我有一个 Vue 应用程序，我在其中使用 v-data-table 和 show-select 选项.我只想使用取消"按钮清除选定的数据按钮.我已经可以通过点击清除表格中的所有数据.

I have a Vue app where I'm using v-data-table with show-select option. I want to clear only selected data using the "cancel" button. Already I can clear all data from the table onclick.

图中示例:我只想清除选定的行(冰淇淋三明治)

Example in picture: I want to clear only the selected row (Ice cream sandwich)

这是我的代码:

表格:

<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 = [];
},

推荐答案

如果您只想取消选择它们:

If you just want to deselect them:

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

如果您想删除它们:

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

_{请记住，这种数组减法算法的复杂度为 O(n^2)，因此对于大型数据集，这可能会很慢.在这种情况下，您可以使用更强大的算法}

这篇关于如何清除v-data-table，Vuetify中的选定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！