作者: | 来源:互联网 | 2023-10-16 10:05
(1)弹框询问用户是否删除数据
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/34b8a3e60af82b8f.jpeg)
1. 引入MessageBox组件,并全局挂载(element.js)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/a34fbcc476e4f952.jpeg)
2. 为删除按钮添加点击事件,并将删除用户的id 传入 该事件所对应的方法
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/db5433992363a08b.jpeg)
3. 在方法中定义是否删除的询问弹框。
点击取消时,返回值为cancel;显示提示信息“已取消删除”
点击确定时,返回时为confirm;
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/d9b3c46c3a1f641a.jpeg)
4. 效果图
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/982943876582b415.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/6805f3a0eabe194b.jpeg)
(2)调用API完成删除用户的操作
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/52415108b685cf8f.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/473900ad132aa0d3.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/8ee87d06011b0208.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/36c547022e0d0c5a.jpeg)
Users.vue
首页
用户管理
用户列表
添加用户
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row.id)"
>
type="danger"
icon="el-icon-delete"
size="mini"
@click="removeUserById(scope.row.id)"
>
effect="dark"
cOntent="分配角色"
placement="top"
:enterable="false"
>
>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
title="提示"
:visible.sync="addDialogVisible"
@close="addDialogClosed"
>
title="修改用户"
:visible.sync="editDialogVisible"
@close="editDialogClose"
>
(3)提交代码到git仓库
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/04aed69d106d0eea.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/e9a8fe375c1ad83c.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/092bf213d3c8c9e2.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/65e7d0a8af748393.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/3a6b3b66c233dee1.jpeg)
![九、删除用户 并提交代码到git仓库 - 文章图片](https://img7.php1.cn/3cdc5/ca23/525/fb7c129eb6d12e1c.jpeg)
后面出现错误。。。。