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

最新推荐文章于 2024-09-14 08:30:00 发布

marsur

最新推荐文章于 2024-09-14 08:30:00 发布

阅读量2.1w

点赞数 7

分类专栏： VUE

本文链接：https://blog.csdn.net/marsur/article/details/101067869

版权

本文介绍了如何在Vue页面中实现点击按钮删除某一条数据的功能。利用Vant-UI框架的组件完成弹出对话框和提示，通过调用'del'方法传入索引index和ID，使用'splice'方法从数组中删除指定项，并与后端接口配合完成数据库的删除操作。

摘要由CSDN通过智能技术生成

弹出的对话框和轻提示使用的是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)&