如何清除 v-data-table 中的选定行，Vuetify答案

【问题标题】：How to clear selected row in v-data-table, Vuetify如何清除 v-data-table 中的选定行，Vuetify
【发布时间】：2021-02-25 07:18:03
【问题描述】：

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

图中的示例：我只想清除选定的行（冰淇淋三明治）

这是我的代码：

表：

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

【问题讨论】：

“清晰”到底是什么意思？您要取消选择还是删除它？
我想取消选择

标签： javascript vue.js datatable vue-component vuetify.js

【解决方案1】：

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

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

如果你想删除它们：

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

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

【讨论】：