news 2026/7/2 1:54:12

web前端crud (修改,删除)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
web前端crud (修改,删除)

对于修改操作,通常会分为两步进行:

  1. 查询回显

  2. 保存修改

交互逻辑:

  1. 点击 编辑 按钮,根据ID进行查询,弹出对话框,完成页面回显展示。(查询回显)

  2. 点击 确定 按钮,保存修改后的数据,完成数据更新操作。(保存修改)

  1. 查询回显

1). 在src/api/dept.js中定义根据id查询的请求

.2)在src/views/dept/index.vue中添加根据ID查询回显的逻辑

为修改按钮绑定事件<template></template>:

然后再编辑按钮当中添加事件在事件中需要传入ID 在自定义列模板当中scope.row.id就可以拿到这一行的值

然后在上面你一下这个相关的函数事件首先发起请求然后进行判断如果成功了,将对话框打开ture然后将内容赋值给dept.vlue 然后再添加一个标题

保存修改

由于 新增部门 和 修改部门使用的是同一个Dialog对话框,当前点击 “确定” 按钮的时候,有可能执行的是新增操作,也有可能是修改操作。

其实,我们只需要根据deptForm对象的id属性值,来判断即可。 如果没有id,则是新增操作 ;如果有id,则是修改操作。

src/api/dept.js中增加如下修改部门的请求

首先,那也是添加一个修改操作的函数,然后修改一下请求方式,同时那将部门数据带到服务端当中

所以在上面那个新增按钮的对话框的事件当中要进行判断如果是修改的话执行修改函数新增的话,直接新增函数同时呢,将返回时提升一下将result变为let类型

删除部门

  • 点击删除按钮,需要删除当前这条数据,删除完成之后,刷新页面,展示出最新的数据。

  • 由于删除是一个比较危险的操作,为避免误操作,通常会在点击删除之后,弹出确认框进行确认。

  • Element 组件:ElMessageBox消息弹出框组件

具体操作步骤:

1). 在src/api/dept.js中增加如下删除部门的请求

删除也是同样如此首先定义函数然后传入对应的ID 然后修改求方式

同时那个删除按钮添加一个事件同时,那也需要通过scope.row.id 这个是定义立模板拿到ID

同时从官网引入对应的消息确定弹窗

然后编写对应删除ID的函数首先呢,

当点击这个按钮的时候然后有一个弹窗然后,

然后将对应的标题和提示的字修改一下,

然后把按钮改成确认和取消然后是

.then点击删除部门所对应的执行,

首先呢,发起请求然后呢,根据返回来的,

结果进行判断如果删除成功的话我们提示删除成功,

然后再重新调用查询函数

如果是失败的话显示失败的原因

如果点击取消按钮.catch提示是已取消

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/12 21:32:39

如何用51单片机精准控制蜂鸣器音调变化?

用51单片机让蜂鸣器“唱”出旋律&#xff1a;从原理到实战的完整实现你有没有试过&#xff0c;给一个简单的电路加上一段代码&#xff0c;就能让它“哼”出《小星星》&#xff1f;这并不是魔法&#xff0c;而是嵌入式系统中最经典、最有趣的应用之一——用51单片机控制无源蜂鸣…

作者头像 李华
网站建设 2026/6/26 21:22:26

基于Proteus 8 Professional下载的创新实训平台构建策略

打造零成本、高效率的电子实训课堂&#xff1a;我用Proteus 8 Professional做了一场教学革命你有没有遇到过这样的场景&#xff1f;学生兴冲冲地走进单片机实验室&#xff0c;却发现开发板不够分&#xff1b;有人接错了电源&#xff0c;芯片“砰”一声冒烟&#xff1b;老师刚讲…

作者头像 李华
网站建设 2026/7/1 11:58:59

Logstash日志收集 pipeline:集中管理CosyVoice3各组件运行日志

Logstash日志收集 pipeline&#xff1a;集中管理CosyVoice3各组件运行日志 在AI语音系统日益复杂的今天&#xff0c;一个看似简单的“生成音频”按钮背后&#xff0c;可能涉及前端交互、模型推理、音频后处理、资源调度等多个模块的协同工作。当用户反馈“声音不自然”或“合成…

作者头像 李华
网站建设 2026/7/1 21:32:19

三极管开关电路新手教程:从元件识别到连接

三极管开关电路实战指南&#xff1a;从零搭建一个能“动手”的电子开关你有没有试过用单片机直接驱动一个继电器&#xff0c;结果发现它不吸合&#xff1f;或者想控制一个小电机&#xff0c;却发现MCU的IO口一通电就“罢工”了&#xff1f;这并不是你的代码出了问题&#xff0c…

作者头像 李华
网站建设 2026/7/1 1:20:54

基于SpringBoot+Vue的学生心理压力咨询评判pf管理系统设计与实现【Java+MySQL+MyBatis完整源码】

摘要 随着社会竞争日益激烈&#xff0c;学生心理健康问题逐渐成为教育领域关注的焦点。心理压力过大会影响学生的学业表现和日常生活&#xff0c;甚至导致严重的心理疾病。传统的心理咨询方式效率较低&#xff0c;难以满足学生的个性化需求。因此&#xff0c;设计并实现一个基…

作者头像 李华
网站建设 2026/6/30 10:43:45

电商主播语音复刻方案:CosyVoice3助力打造24小时自动带货音频

电商主播语音复刻方案&#xff1a;CosyVoice3助力打造24小时自动带货音频 在直播电商竞争白热化的今天&#xff0c;一个直播间能否持续输出高质量内容&#xff0c;往往决定了它的转化上限。但现实是&#xff0c;再敬业的主播也无法做到24小时在线&#xff0c;而轮班制又面临成本…

作者头像 李华