Vue + ElementUI的电商管理系统实例05 修改用户
1、展示修改用户的对话框
给修改按钮添加点击事件:
<!--修改--> <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog()"></el-button>
添加修改对话框代码:
<!--修改用户信息的对话框--> <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="editDialogVisible = false">取 消</el-button> <el-button type="primary" @click="editDialogVisible = false">确 定</el-button> </span> </el-dialog> <script> export default { data() { return { editDialogVisible: false // 控制修改用户信息对话框是否显示 } }, methods: { // 监听 修改用户状态 showEditDialog() { this.editDialogVisible = true } } } </script>
此时,点击修改按钮已经可以弹出对话框了。
2、显示对应的用户信息
通过作用域插槽获取row信息
<!--修改按钮--> <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
新建editForm:
<script> export default { data() { return { // 修改用户信息的表单数据 editForm: { username: '', email: '', mobile: '' } } }, methods: { // 监听 修改用户状态 showEditDialog(userinfo) { this.editDialogVisible = true console.log(userinfo) this.editForm = userinfo } } } </script>
也可以通过ID查询对应的用户信息:
<!--修改按钮--> <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button> // 监听 修改用户状态 async showEditDialog(id) { this.editDialogVisible = true // console.log(id) const { data: res } = await this.$http.get('users/' + id) if (res.meta.status !== 200) { return this.$message.error('查询用户信息失败') } this.editForm = res.data }
3、渲染修改用户信息的表单
用户名为禁止修改状态
<!--内容主体区域--> <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px"> <el-form-item label="用户名"> <el-input v-model="editForm.username" :disabled="true"></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>
修改用户信息表单的验证规则:
// 修改用户信息表单的验证规则对象 editFormRules: { email: [ { required: true, message: '请输入用户邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '请输入用户手机', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] }
editForm:是数据绑定对象,editFormRef:是引用名称,editFormRules:是验证规则,label-width:是表单域标签的宽度
验证规则的required:表示是否必填,message:表示提示信息,trigger:表示触发时机(blur失去焦点)
点击修改按钮,实现效果如图:
4、实现修改用户信息表单的重置功能
添加close事件:
<!--修改用户信息的对话框--> <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
添加editDialogClosed事件:
// 监听 修改用户信息对话框的关闭事件 editDialogClosed() { // 表单内容重置为空 this.$refs.editFormRef.resetFields() // 通过ref引用调用resetFields方法 }
5、完成提交修改前的表单预校验
给确定按钮绑定点击事件:
<el-button type="primary" @click="editUserInfo">确 定</el-button> // 点击按钮 修改用户信息 editUserInfo() { this.$refs.editFormRef.validate(valid => { // console.log(valid) if (!valid) return // 可以发起修改用户信息的网络请求 this.editDialogVisible = false }) }
6、提交表单完成用户信息的修改
继续添加代码:
// 点击按钮 修改用户信息 editUserInfo() { this.$refs.editFormRef.validate(async valid => { // console.log(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.$message.success('修改用户信息成功!') // 关闭对话框 this.editDialogVisible = false // 重新发起请求用户列表 this.getUserList() }) }
OK,完成