1、添加新用户，通过dialog的弹窗形式
1.1 添加的按钮
"primary"
size="small"
round
@click="addNewUser()"
1.2 调用方法设置窗口可见
注意：adddialogVisible: false,默认是false，默认窗口不可见
//添加用户窗口
addNewUser() {
this.adddialogVisible = true;
},
1.3 窗口代码
"添加新用户"
:visible.sync="adddialogVisible"
width="30%"
:close-on-click-modal="false"
>
<el-form
style="width: 80%"
:model="UserForm"
:rules="rules"
label-width="100px"
ref="UserForm"
class="demo-ruleForm"
>
<el-form-item label="姓名" prop="userName">
<el-input
prefix-icon="el-icon-user"
class="letLine"
v-model="UserForm.userName"
></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="UserForm.nickName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="UserForm.password"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input v-model="UserForm.gender"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="UserForm.phone"></el-input>
</el-form-item>
<el-form-item label="身份证" prop="idCard">
<el-input v-model="UserForm.idCard"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('UserForm')">重置</el-button>
<el-button @click="adddialogVisible = false">取 消</el-button>
<el-button
type="primary"
round
@click="submitForm('UserForm')"
1.4 提交注册信息方法
提示：这里完成的效果：用户注册成功、会以弹窗的形式提示用户信息添加成功
// //添加用户
submitForm(UserForm) {
const _this = this;
this.$refs[UserForm].validate((valid) => {
if (valid) {
axios.post("/user/register", this.UserForm).then(function (resp) {
if (resp.data.code == 200) {
_this.adddialogVisible = false; //dialog对话窗口关闭
// alert("添加成功") 跳转的路由
_this.$alert(
"《" + _this.UserForm.userName + "》添加成功",
"消息",
{
confirmButtonText: "确定",
callback: (action) => {
_this.showAllUserInfo();
},
}
);
_this.showAllUserInfo();
} else {
_this.$message.error(resp.data.data.errMessage);
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
1.5 使用mybatisPlus方法进行添加信息到数据库
2、删除用户信息之前进行信息提示
2.1 代码块
"right" label="操作" width="200">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="text"
size="small"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
<el-popconfirm
confirm-button-text="好的"
cancel-button-text="不用了"
icon="el-icon-info"
icon-color="red"
title="确定删除该用户吗？"
@confirm="handleDelete(scope.$index, scope.row)"
>
<el-button
type="danger"
icon="el-icon-delete"
slot="reference"
2.2 删除方法
//删除用户
handleDelete(index, row) {
const _this = this;
axios.delete("/user/deleteUser/"+row.idCard).then((resp) => {
if (resp.data.code == 200) {
_this.$alert("删除用户成功", "消息", {
confirmButtonText: "确定",
callback: (action) => {
_this.showAllUserInfo();
},
});
} else {
_this.$message.error(resp.data.data.errMessage);
}
});
},
3、效果展示
