弹出的对话框和轻提示使用的是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方法向/从数组中添加/删除项目,然后返回被删除的项目。
第一个参数为删除项目的位置,第二个参数为删除的项目数量。