vue.js - 如何仅清除数据表中选定的行，vuetify

Question

我有一个 vue 应用程序，我在其中使用带有 show-select 选项的 v-data 表。我只想使用“取消”按钮清除选定的数据，我正在寻找如何正确执行此操作的解决方案。我已经可以清除表 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 = [];
      
    },

标签： vue.jsdatatablevuetify.jsselection

Answer 1

使用任何唯一属性（在此示例中 - 一个 id）从您的 items 数组中过滤掉该行。

cancel(){
    this.desserts = this.desserts.filter((e)=> {
      return e.id !== this.selected.id;
    });
  }