实现效果

具体实现步骤：

1.准备一个对话框，并在其中加入自己想要的表单，当点击修改按钮时，启用对话框

<!--      修改用户的对话框-->
<el-dialogtitle="修改用户":visible.sync="editDialogVisible"width="50%" @close="editDialogClosed"><el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" ><!--     disabled表示禁用状态     --><el-form-item label="用户名" prop="uername" ><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="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUserInfo">确 定</el-button></span>
</el-dialog>

2.为修改按钮添加点击事件，并编辑事件

（1）为按钮添加点击事件

<!--修改按钮-->
<el-button size="small" type="primary" icon="el-icon-edit" round @click="showEditDialog(slotProps.row.id)"></el-button>

其中slotProps.row表示获取修改按钮说在这一行的所有数据。

slotProps.row.id即获取已存在的用户的ｉｄ，通过ｉｄ去进行用户信息的查询。

（2）编辑事件

// 展示编辑用户的对话框
async showEditDialog(id) { // 发起请求获取已存在的用户信息const { data: res } = await this.$http.get('users/' + id)// 将获取到的数据传给editFormthis.editForm = res.data// 判断是否获取到了信息if (res.meta.status !== 200) {this.$message.error('查询用户信息失败！')} // 查询信息成功的话，打开对话框this.editDialogVisible = true
},

（3）在ｄａｔａ的return中定义相关数据

// 控制修改用户对话框的显示
editDialogVisible: false,

// 修改用户的表单数据
editForm: {},

// 修改用户表单的验证规则对象
editFormRules: {email: [{required: true,message: '请输入邮箱',trigger: 'blur'},{validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '请输入手机号',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}]}

（4）在ｄａｔａ的最前面定义校验规则

data(){//校验邮箱的规则var checkEmail = (rule, value, callback) => {const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!reg.test(value)){callback(new Error('请输入有效的邮箱'));}callback();}// 验证手机号的规则var checkMobile = (rule, value, callback) => {const reg=/^1[3456789]\d{9}$/;if(!reg.test(value)){callback(new Error('请输入有效的手机号码'));}callback();}

（5）为确认按钮添加事件，进行表单的预校验，关闭会话框，重新获取列表，并提示修改数据成功。

<el-button type="primary" @click="editUserInfo">确 定</el-button>

// 修改用户信息并提交
editUserInfo(){this.$refs.editFormRef.validate( async vaild =>{if (!vaild) 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('修改数据成功')})
}

（6）为表单设置关闭时，移除表单项的校验结果。

<el-dialogtitle="修改用户":visible.sync="editDialogVisible"width="50%" @close="editDialogClosed">

// 监听修改用户对话框的关闭
editDialogClosed(){ this.$refs.editFormRef.resetFields()
},

ｖｕｅ实现修改用户信息的全过程相关推荐

jsp弹窗修改信息_WEB最最最初级修改用户信息
哈喽,今天第一次发.内容非常非常基础,记录一下自己的成长吧. 今天的内容是通过jsp页面传参来修改用户信息.emmm,说的通俗一点就是对数据库的修改. 好! 话不多说!我们开始! 先看我简陋的页面那 ...
用户中心 - 修改用户信息
package com.leon.pojo.bo.center;import io.swagger.annotations.ApiModel; import io.swagger.annotation ...
VueJS ajax综合案例（修改用户信息实现步骤）
修改用户信息 1.过程演示 2.代码实现
usermod 修改用户信息
7.2 usermod 修改用户信息 1.命令功能 usermod 修改已存在的用户账号信息. 2.语法格式 usermod option login 参数选项说明选项选项说明 -c 修改用户pa ...
java 银行管理系统怎么储存账户信息_银行管理系统实现用户注册登录存、取款交易记录查询和修改用户信息等功能...
========= 项目介绍======== 银行账户管理系统本项目主要实现用户注册登录存.取钱和修改用户信息功能. 用户信息的存储和获取通过集合和IO输入输出流实现. 存钱 ...
linux修改用户描述的命令,Linux修改用户信息(usermod)
Linux修改用户信息(usermod)教程 Linux usermod命令详解功能修改用户账户. 语法 usermod [options] username 参数参数描述 options u ...
Centos中用户相关操作(创建用户、设置密码、切换用户、修改用户信息、附加组、删除用户、用户分类)
1.创建新用户在root用户权限下新建用户: useradd -m xxx 选项说明 -m 自动创建用户主目录,主目录的名字就是用户名 -g 指定用户所属的用户组,默认不指定会自动创建一个同名的用 ...
thinkPHP6.0入门笔记（四）——删除和修改用户信息
thinkPHP6.0实现删除和修改用户信息 1.删除用户信息 2.优化bootstrap资源引入方式 3.浏览器的cookie与session机制 4.token令牌原理 5.利用token防止表单 ...
SSM整合--简单的增删改查--修改用户信息
SSM整合--简单的增删改查修改用户信息修改用户信息 ## 根据id查找用户信息,显示在employ_update页面 ## 进行修改信息后,提交表单,保存数据### 1.根据id查询用户信息 h ...

ｖｕｅ实现修改用户信息的全过程

实现效果

具体实现步骤：

1.准备一个对话框，并在其中加入自己想要的表单，当点击修改按钮时，启用对话框

2.为修改按钮添加点击事件，并编辑事件

（1）为按钮添加点击事件

（2）编辑事件

（3）在ｄａｔａ的return中定义相关数据

（4）在ｄａｔａ的最前面定义校验规则

ｖｕｅ实现修改用户信息的全过程相关推荐

最新文章

热门文章