VUE page implements clicking a button to delete a piece of data

The pop-up dialog box and light prompt use the components in the Vant-UI framework

<template>
  <div class="body">
    <div v-for="(item,index) in data">
    <van-cell-group class="panel">
       <button class="delete" @click="del(index,item.trainee_id)">删除</button> //传递的参数为该数据在数组中的索引和唯一标识该数据的id
      <van-cell title="姓名"  :value="item.trainee_name" />
      <van-cell title="编号"  :value="item.trainee_code" />
      <van-cell title="性别"  :value="item.sex" />
      <van-cell title="生日"  :value="formatDateTime(item.birthday)" />
      <van-cell title="就读学校"  :value="item.school_name?item.school_name:'未填'" />
      <van-cell title="就读班级"  :value="item.class_name?item.class_name:'未填'" />
      <van-cell title="入学年份"  :value="item.admission_year?item.admission_year:'未填'" />
    </van-cell-group>
    </div>
  </div>
</template>

<script>
  import { Dialog } from 'vant';
  export default {
    data(){
      return {
        data: [],
      }
    },
    methods:{
      del(index,id){
        let that = this
        Dialog.confirm({
          message: '确定删除该学员吗?'
        }).then(() => {
          that.$ajax.get('https://Trainee/delTrainee',
            {
              params: {
                trainee_id: id
              }
            }).then(
            res => {
              if(res.data.code === 1){
                that.$toast('删除成功');    //轻提示
                that.data.splice(index, 1);    //删除数组中的该条数据
              }
            }
          )
        }).catch(() => {
          // on cancel
        });
      },
    }
</script>

focus

1. Delete method del(index,id)

index is to delete the index data of the current array, so as to render the correct array after deleting the data

The id is to be passed to the backend interface for database deletion

2.that.data.splice(index, 1);

The splice method adds/removes items to/from the array and returns the removed item.

The first parameter is the position of the deleted item, and the second parameter is the number of deleted items.