Удаление выбранной строки в таблице данных Vuetify

Question

Я использую таблицу данных в vuetify.Я использую V-флажок.Я хочу удалить выбранный элемент из v-checkbox нажатием кнопки.У меня есть кнопка удаления внизу таблицы данных.Поэтому, когда пользователь нажимает на кнопку удаления, выбранная строка в таблице данных должна быть удалена.Есть идеи как это сделать?

<script>
  export default {
    data () {
      return {
        props:[],
        selected: [],
        headers: [
          {
            text: 'Name',
            align: 'left',
            sortable: true,
            value: 'name'
          },
          { text: 'Organisation', value: 'organisation' },
          { text: 'Supplier', value: 'supplier' },
          { text: 'Created By', value: 'createdBy' },
          { text: 'Updated By', value: 'updatedBy' },
       
        ],
        projects: [
          {
            name: 'test',
            organisation: 'test',
            supplier: 'test',
            createdBy: 'test',
            updatedBy: 'test'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    },

    methods: {
        deleteProject
        {
            // delete funtion here
        },

        liveProject()
        {
            alert("live");
        },

        closeProject()
        {
            alert("close");
        },
    }
  }
</script>

<template>
<div>

    <v-toolbar flat color="white">
      <v-toolbar-title>Manage Projects</v-toolbar-title>   
      {{ props }}
    </v-toolbar>
    
  <v-data-table
    v-model="props"
    :headers="headers"
    :items="projects"
    item-key="name"
    select-all
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>
        <v-checkbox
          v-model="props.selected"
          primary
          hide-details
        ></v-checkbox>
      </td>
      <td>{{ props.item.name }}</td>
      <td class="text-xs-left">{{ props.item.organisation }}</td>
      <td class="text-xs-left">{{ props.item.supplier }}</td>
      <td class="text-xs-left">{{ props.item.createdBy }}</td>
      <td class="text-xs-left">{{ props.item.updatedBy }}</td>
     
    </template>
  </v-data-table>

   <div class="text-xs-center pt-2">
      <v-btn color="primary" @click="deleteProject">Delete</v-btn>
      <v-btn color="primary" @click="liveProject">Make Live</v-btn>
       <v-btn color="primary" @click="closeProject">Close</v-btn>
       
       
    </div>
</div>

</template>

Answer 1

Если Data table привязан к массиву объектов store :

---

Мы также можем использовать map для полученияindex объекта в массиве хранения и удалите его, используя:

Мутация

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload.id); state.someArrayofObjects.splice(i, 1); }

Здесьid - это идентификатор, переданный с полезной нагрузкой в ​​MUTATION, мы также можем передать только id как целое payload.В этом случае мы можем сделать что-то вроде:

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload); state.someArrayofObjects.splice(i, 1); }

Answer 2

У меня вчера была похожая проблема, но с jquery.Теперь с vuejs, на самом деле, проще связать модель, так что все выбранные строки будут помещены в свойство данных.Затем, нажав кнопку «Удалить», переберите все выбранные идентификаторы или ключи и удалите их из своего магазина или вызвав бэкэнд API или свойство данных, как вы сделали здесь. Например:

data: () => ({
    selected: [],
    projects: {/*...content in here */},
});

methods: {

   delete() {
       this.selected.forEach(function(project) { // project here is just the index of the selected in the projects array
           projects.splice(project, 1);
      });

      this.selected = []; // don't forget to empty selected
   }
}

Answer 3

Вот код для удаления выбранных строк из таблицы данных.

Проверьте приведенный ниже пример.

Кодовая ссылка на ваше решение

Шаблон =>

    <div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      select-all
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
    <div>
      <v-btn color="primary" @click="deleteItem">Delete</v-btn>
    </div>
  </v-app>
</div>

Скрипт =>

  new Vue({
  el: '#app',
  data () {
    return {
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    }
  },
  methods: {
   deleteItem () {
   if(confirm('Are you sure you want to delete this item?')){
  for(var i = 0; i <this.selected.length; i++){
      const index = this.desserts.indexOf(this.selected[i]);
      this.desserts.splice(index, 1);
  }
    }
   }
}
})

Answer 4

deleteProject(item_name){
    this.projects.splice(this.projects.findIndex(e=> e.name == item_name),1)
}

// JS splice method for remove items from an array.
// JS findIndex method for find the index of the element which you want to delete.