Question

我使用vue和vuetify创建了数据表。每当我单击特定行上的删除图标时，就会出现一个小吃栏。在该小吃栏中有两个按钮，是和否。如果我单击是按钮，则必须删除特定行。我该如何做到这一点

这是数据表和小吃栏组件

<template>
<div>
    <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :bottom="y === 'bottom'"
        :right="x === 'right'"
        :left="x === 'left'"
        :multi-line="mode === 'multi-line'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
    >
        <h3>{{text}}</h3>
        <v-btn v-show="show" flat color="black" v-on:click="removeRow">Yes</v-btn>
        <!-- <v-btn v-show="show" flat color="black" v-on:click="cancelRemove">No</v-btn> -->
    </v-snackbar>
    <v-card-title>
        <v-spacer></v-spacer>
        <v-text-field
            v-model="search"
            append-icon="search"
            label="Search"
            single-line
            hide-details
        ></v-text-field>
    </v-card-title>
    <v-data-table
        loading
        :headers="headers"
        :items ="rows"
        :search="search"
        class="elevation-1"
        disable-initial-sort
    >
        <template slot="items" slot-scope="props">
            <td class="justify-center layout px-0">
                <v-btn icon class="mx-0" @click="editItem(props.item)">
                    <v-icon color="teal">edit</v-icon>
                </v-btn>
                <v-btn icon class="mx-0" @click="deleteItem(props.item)">
                    <v-icon color="pink">delete</v-icon>
                </v-btn>
            </td>
            <td>{{props.item.firstName}}</td>
            <td>{{props.item.lastName}}</td>
            <td>{{props.item.loginName}}</td>
            <td>{{props.item.customerName}}</td>
            <td>{{props.item.phone}}</td>
            <td>{{props.item.email}}</td>
            <!-- <td>{{props.item.password}}</td> -->
            <td>{{props.item.startDate}}</td>
            <td>{{props.item.endDate}}</td>
            <td>{{props.item.loginExpiry}}</td>
            <td>{{props.item.approval}}</td>
            <td>{{props.item.lang}}</td>
            <td>{{props.item.grantee}}</td>
            <td>{{props.item.description}}</td>
        </template>
    </v-data-table>
</div>

这是data（）

data() {
    return {
      rows: [], // fetched from api
      search: "",
      snackbar: false,
      y: "top",
      x: "right",
      mode: "multi-line",
      timeout: 2000,
      text: 'Are you sure you want to delete this item?',
      color: 'error',
      show: true,
      yes: false,
      headers: [
        { text: "Actions", value: "name", sortable: false },
        { text: "First Name", value: "firstName", align: "left" },
        { text: "Last Name", value: "lastName" },
        { text: "Login Name", value: "loginName" },
        { text: "Customer Name", value: "customerName" },
        { text: "Phone", value: "phone" },
        { text: "Email", value: "email" },
        // {text: 'Password', value: 'password'},
        { text: "Start Date", value: "startDate" },
        { text: "End Date", value: "endDate" },
        { text: "Login Expiry", value: "loginExpiry" },
        { text: "Is Approval User", value: "approval" },
        { text: "Language", value: "lang" },
        { text: "Grantee Allowed", value: "grantee" },
        { text: "Description", value: "description" }
      ]
    };
  },

这是脚本

deleteItem(item) {
        this.snackbar = true;
        this.text = "Are you sure?"
        this.timeout=2000;
        this.color="success"
//currently using this method
        const index = this.rows.indexOf(item)
    },
    removeRow(){
       // How to delete specific row whenever I click on  this event
    }

Answer 1

出于这种需求，我通常使用数据rowToDelete

deleteItem (item) {
    this.snackbar = true;
    this.text = "Are you sure?"
    this.timeout = 2000;
    this.color = "success"
    this.rowToDelete = item
},

removeRow(){
    const index = this.rows.indexOf(this.rowToDelete)
    // Then remove your item from rows
    // And on success, reset rowToDelete: this.rowToDelete = null
}

如何删除数据表中的特定行？

1 个答案: