抚顺市网站建设_网站建设公司_代码压缩_seo优化

对于修改操作，通常会分为两步进行：

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提示是已取消