从 Quasar 的表中删除特定行答案

【问题标题】：Remove specific row from Quasar's table从 Quasar 的表中删除特定行
【发布时间】：2020-02-25 19:26:12
【问题描述】：

我阅读了 Quasar 的文档，但没有看到任何从表格中删除特定行的说明。例如，如何从表格中删除选定的行？我想知道如何在脚本部分而不是在 HTML 段中做到这一点。

【问题讨论】：

标签： vue.js vuejs2 vue-component quasar-framework quasar

【解决方案1】：

您可以使用splice 通过使用row 的索引来删除行。

methods:{
    deleteSelected(){
      let self = this;
      this.selected.filter(function(item){
        self.data.splice(self.data.indexOf(item), 1);
        return item;
      });
      this.selected = [];
    },
    deleteval(index){
      console.log(index)
      this.data.splice(index, 1);

      console.log(this.data)
    }
  }

<template v-slot:top-right>
        <q-btn
          color="primary"
          icon-right="delete_forever"
          no-caps
          @click="deleteSelected"
        />
      </template>
       <template v-slot:body-cell-action="props">
        <q-td :props="props">
          <q-btn
          color="negative"
          icon-right="delete"
          no-caps
          flat
          dense
          @click="deleteval(data.indexOf(props.row))"
        />
        </q-td>
      </template>

工作代码笔 - https://codepen.io/Pratik__007/pen/eYNvvva?editable=true&editors=101

【讨论】：

为什么使用 props.row (object) 在 array.splice 中工作，它期望第一个参数是 int？
我在拼接中使用了索引而不是对象。
@click="deleteval(props.row)" 这里 props.row 是一个对象，对吧？
是的 props.row 是 Object
所以 -> @click="deleteval(props.row)" -> deleteval(index){ -> this.data.splice(index, 1); -> 您将对象作为拼接第一个参数传递，对吧？

【解决方案2】：

你可以使用 splice() 。其他方法如 pop()、remove() 不符合预期

【讨论】：

您发布的代码不是可运行的sn-p（只需单击“运行...”按钮，您就会意识到这一点）！请编辑您的答案并将您的代码格式化为普通代码块（使用简单的三个反引号代码围栏）。