Vue用户管理模块(实现用户的增删改)
elementui 对话框
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
做一下修改
<!--添加用户对话框-->
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="50%"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
data() {
return {
// 添加对话框的显示或隐藏(设置为false 默认不显示)
addDialogVisible:false,
};
},
需要在对话框中进行添加输入框进行表单的校验
找带有表单验证功能的
show-password(不显示密码)
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password" show-password></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
data() {
return {
// 添加对话框的显示或隐藏
addDialogVisible: false,
// 添加用户的表单数据对象
addForm:{
username:'',
password:'',
email:'',
mobile:'',
},
// 添加用户的校验规则
addFormRules:{
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message: '邮箱格式不正确', trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern:/^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/,message: '手机号码格式不正确', trigger: 'blur' }
],
},
};
},
输入完不管校验是否通过,关闭再打开会显示如上效果,这是不合理的，在elementui 对话框中关闭会触发
<!--添加用户对话框-->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
// 监听添加用户对话框的关闭事件
addDialogClosed(){
//重置表单
this.$refs.addFormRef.resetFields()
}
用户添加功能
{
"data": {
"id": 28,
"username": "tom",
"mobile": "test",
"type": 1,
"openid": "",
"email": "[email protected]",
"create_time": "2020-11-10T03:47:13.533Z",
"modify_time": null,
"is_delete": false,
"is_active": false
},
"meta": {
"msg": "用户创建成功",
"status": 201
}
}
addUser(){
// 校验添加用户这个表单 valid（该参数校验是否成功）
this.$refs.addFormRef.validate(async valid=>{
if(!valid){
return
}
const {data:res} = await this.$http.post('users',this.addForm)
if(res.meta.status !== 201){
return this.$message.error('添加用户失败')
}
// 成功后
//关闭对话框
this.addDialogVisible=false
// 刷新用户列表
this.getUserList()
// 提示添加用户成功
this.$message.success('添加用户成功')
})
}
修改用户对话框
<!--修改用户对话框-->
<el-dialog
title="修改用户"
:visible.sync="editDialogVisible"
width="50%"
@close="editDialogClosed"
>
<el-form
:model="editForm"
:rules="editFormRules"
ref="editFormRef"
label-width="70px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUser">确 定</el-button>
</span>
</el-dialog>
使用插槽 获取当前行信息
<el-table-column label="操作">
<!-- enterable 文字是否可以移入提示信息，默认是可以的 -->
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row.id)"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
></el-button>
<el-tooltip
effect="dark"
placement="top"
content="分配角色"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
></el-button>
</el-tooltip>
</template>
</el-table-column>
// 修改用户的校验规则
editFormRules: {
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: "邮箱格式不正确",
trigger: "blur",
},
],
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/,
message: "手机号码格式不正确",
trigger: "blur",
},
],
},
// 显示编辑用户对话框
async showEditDialog(id){
const {data:res} = await this.$http.get(`users/${id}`)
if(res.meta.status !==200){
return this.$message.error('查询用户失败')
}
this.editForm = res.data
this.editDialogVisible = true
}
},
给修改用户确定按钮绑定事件
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUser">确 定</el-button>
</span>
// 修改用户
editUser(){
this.$refs.editFormRef.validate(async valid => {
if(!valid){
return
}
const {data:res} = await this.$http.put(`users/${this.editForm.id}`,{
email:this.editForm.email,
mobile:this.editForm.mobile
})
if(res.meta.status !== 200){
return this.$message.error('修改用户失败')
}
this.editDialogVisible = false
this.getUserList()
this.$message.success('修改成功！')
})
},
// 监听修改用户对话框的关闭事件
editDialogClosed(){
//重置表单
this.$refs.addFormRef.resetFields();
}
删除用户功能
elemetui 中 MessageBox
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
使用插槽获取当前行数据
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="removeUserById(scope.row.id)"
></el-button>
// 根据ID删除用户
removeUserById(id){
this.$confirm('确定要删除该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
const {data:res} = await this.$http.delete(`users/${id}`)
if(res.meta.status !== 200){
return this.$message.error('删除用户失败')
}
this.getUserList()
this.$message.success('删除用户成功!')
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}