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

Posted 2023-02-23

【中文标题】如何清除 v-data-table 中的选定行，Vuetify

【英文标题】：How to clear selected row in 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 = [];
,

【问题讨论】：

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

我想取消选择

【参考方案1】：

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

cancel() 
   this.selected = [];

如果你想删除它们：

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

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