La boîte de dialogue contextuelle et l'invite lumineuse utilisent les composants du framework 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>se concentrer
1. Supprimer la méthode del(index,id)
index consiste à supprimer les données d'index du tableau actuel, afin de restituer le tableau correct après la suppression des données
L'identifiant doit être transmis à l'interface backend pour la suppression de la base de données
2.that.data.splice(index, 1);
La méthode splice ajoute/supprime des éléments du tableau et renvoie l'élément supprimé.
Le premier paramètre est la position de l'élément supprimé et le deuxième paramètre est le nombre d'éléments supprimés.