news 2026/11/4 0:35:05

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/11/3 14:03:55

半双工RS485接线实现:从原理到接线图

半双工RS485接线实战&#xff1a;从原理到稳定通信的每一步你有没有遇到过这样的场景&#xff1f;系统明明在实验室跑得好好的&#xff0c;一拉到现场就频繁丢包、数据错乱&#xff0c;重启不断。查电源&#xff1f;正常。看程序&#xff1f;逻辑没问题。最后发现——问题出在那…

作者头像 李华
网站建设 2026/11/3 2:08:27

快速实现网易云音乐NCM文件解密转换的完整指南

快速实现网易云音乐NCM文件解密转换的完整指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为下载的网易云音乐NCM文件无法在其他播放器播放而困扰吗&#xff1f;别担心&#xff0c;今天我将为你带来一份简单易用的NCM解密转…

作者头像 李华
网站建设 2026/11/3 2:08:18

新手教程:理解USB3.0传输速度的协议基础

拆解USB3.0真实速度&#xff1a;为什么你的移动硬盘跑不满5Gbps&#xff1f;你有没有过这样的经历&#xff1f;买了一个标着“USB3.0接口、理论速率5Gbps”的移动硬盘&#xff0c;信心满满地拷贝一个几十GB的视频文件&#xff0c;结果实测速度只有300多MB/s&#xff0c;甚至更低…

作者头像 李华
网站建设 2026/11/3 2:08:18

云计算数据中心的架构选择:x64 vs arm64系统学习

云计算时代的架构之争&#xff1a;x64与arm64的实战抉择你有没有遇到过这样的场景&#xff1f;团队在规划新一期云服务部署时&#xff0c;突然有人抛出一个问题&#xff1a;“这次能不能试试ARM服务器&#xff1f;”会议室瞬间安静下来——有人点头称是&#xff0c;说AWS Gravi…

作者头像 李华
网站建设 2026/11/4 11:45:07

LAV Filters专业指南:打造完美视频播放体验的终极教程

LAV Filters专业指南&#xff1a;打造完美视频播放体验的终极教程 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters 视频播放卡顿、格式不支持、解码失败&#…

作者头像 李华
网站建设 2026/11/2 22:55:50

缓存高频请求结果:热门语音模板直接复用

缓存高频请求结果&#xff1a;热门语音模板直接复用 在智能客服、数字人直播和公共广播等场景中&#xff0c;我们常常会遇到这样的问题&#xff1a;同一句话被反复合成成语音——“您好&#xff0c;请问有什么可以帮助您&#xff1f;”、“请注意&#xff0c;列车即将进站”………

作者头像 李华