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 は、データを削除した後に正しい配列をレンダリングするために、現在の配列のインデックス データを削除します。

ID はデータベースを削除するためにバックエンド インターフェイスに渡されます。

2.that.data.splice(インデックス, 1);

splice メソッドは、配列に項目を追加または配列から削除し、削除された項目を返します。

最初のパラメータは削除されたアイテムの位置、2 番目のパラメータは削除されたアイテムの数です。