Vue + ElementUI的电商管理系统实例05 修改用户
2023-09-27 14:24:39 时间
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,完成
相关文章
- Vue实例的生命周期created和mounted的区别
- vue路由跳转的方式
- 创建一个 Vue 的实例
- vue/cli中css.sourceMap-open-inline-host-port-https-openPage-compress -devServer.proxy的简单介绍
- vue.js全局组件和局部组件
- vue-element-admin 代码风格
- Vue + ElementUI的电商管理系统实例31 项目上线-使用pm2管理应用
- Vue + ElementUI的电商管理系统实例30 项目上线-配置https服务
- Vue + ElementUI的电商管理系统实例25 项目优化-通过 CDN 优化 ElementUI 的打包
- Vue + ElementUI的电商管理系统实例24 项目优化- externals加载外部CDN
- Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
- Vue + ElementUI的电商管理系统实例16 数据报表
- Vue + ElementUI的电商管理系统实例15 订单列表
- Vue + ElementUI的电商管理系统实例14 商品列表-添加商品
- Vue + ElementUI的电商管理系统实例04 添加用户
- VueX 基本使用(vue状态管理)及简单小实例
- Vue简单基础 + 实例 及 组件通信
- vue项目优化--使用CDN和Gzip
- Vue实例方法之事件的实现
- Vue面试题1
- vue.js中watch的六种用法(附实例解析)
- 【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲
- vue系列:在js文件中使用vue实例和store实例
- Vue学习杂记(七)—— vue-cli的使用以及eslint风格
- Vue.js自定义指令的用法与实例
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航