删除数据表Vuetify上的选定行

时间:2019-02-25 09:13:01

标签: vue.js vuejs2 vue-component vuetify.js

我在vuetify中使用数据表。我正在使用v-checkbox。我想使用按钮单击从v复选框中删除所选项目。我在数据表的底部有一个删除按钮。因此,当用户单击删除按钮时,应删除数据表中的所选行。有什么想法怎么做吗?

<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>

4 个答案:

答案 0 :(得分:0)

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. 

答案 1 :(得分:0)

昨天我有一个类似的问题,但使用了jquery。现在使用vuejs,我想使用模型绑定实际上更简单,因此所有选定的行都将被推送到data属性。然后在点击删除后,循环浏览所有选定的ID或键,然后将其从您的商店中删除,或者通过调用后端api或data属性,如在此所做的操作,例如

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
   }
}

答案 2 :(得分:0)

这是用于从数据表中删除所选行的代码。

检查下面的示例。

Codepen link to your solution

Template =>

    <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);
  }
    }
   }
}
})

答案 3 :(得分:0)

如果Data table绑定到store的对象数组


我们还可以使用地图将对象的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,我们也只能将id作为整个payload传递。在这种情况下,我们可以执行以下操作:

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