VUE页面实现点击按钮删除某一条数据

弹出的对话框和轻提示使用的是Vant-UI框架中的组件

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

重点

1.删除方法del(index,id)

index是为了删除当前数组的第index条数据，从而渲染出删除数据后的正确数组

id是为了传递给后端接口进行数据库的删除操作

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

splice方法向/从数组中添加/删除项目,然后返回被删除的项目。

第一个参数为删除项目的位置，第二个参数为删除的项目数量。