news 2026/6/4 9:22:36

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/5/29 5:14:32

终极NVIDIA显卡优化指南:快速提升游戏性能的5个秘诀

终极NVIDIA显卡优化指南&#xff1a;快速提升游戏性能的5个秘诀 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 在追求极致游戏体验的道路上&#xff0c;NVIDIA Profile Inspector作为一款强大的开源显…

作者头像 李华
网站建设 2026/5/31 18:40:57

League Akari:从游戏准备到结束的完整LOL辅助工具体验指南

League Akari&#xff1a;从游戏准备到结束的完整LOL辅助工具体验指南 【免费下载链接】LeagueAkari ✨兴趣使然的&#xff0c;功能全面的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/LeagueAkari 还在…

作者头像 李华
网站建设 2026/5/15 1:59:19

从零实现LVGL在RT-Thread工控系统中的移植

从零打造工业级HMI&#xff1a;LVGL在RT-Thread上的深度移植实战你有没有遇到过这样的场景&#xff1f;设备功能强大&#xff0c;通信稳定&#xff0c;控制精准——但一打开人机界面&#xff0c;卡顿、花屏、触摸漂移……用户眉头一皱&#xff1a;“这系统靠谱吗&#xff1f;”…

作者头像 李华
网站建设 2026/5/30 19:27:42

MISRA C++规则集在Parasoft环境中的启用方法操作指南

如何在 Parasoft 中启用 MISRA C&#xff1a;从规则理解到工程落地的完整实践你有没有遇到过这样的场景&#xff1f;项目进入功能安全认证阶段&#xff0c;QA 团队突然提出&#xff1a;“代码必须通过 MISRA C 合规检查。”而你的开发环境里连一条相关规则都没激活。更糟的是&a…

作者头像 李华
网站建设 2026/5/3 11:29:03

终极显卡优化指南:解锁隐藏性能的完整教程

终极显卡优化指南&#xff1a;解锁隐藏性能的完整教程 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 还在为游戏卡顿、画面撕裂而烦恼吗&#xff1f;想要让显卡发挥出真正的潜力吗&#xff1f;今天我们…

作者头像 李华