Vue+Element-UI实现双向数据绑定

数据初始化、数据校验、业务逻辑处理模块data(){//检查邮箱varcheckEmail=(rule,value,cb)=>{constregEmail=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/if(regEmail.test(value)){//合法的电子邮件返回cb()}cb(newError('请输入有效的电子邮件'))}//查询手机号码varcheckMobile=(rule,value,cb)=>{constregMobile=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if(regMobile.test(value)){returncb()}cb(newError('请输入合法的电话号码'))}return{//获取用户列表的参数对象queryInfo:{query:'',//当前页码pagenum:1,//当前每页显示的项目数pagesize:2},userList:[],total:0,//控制添加用户对话框的显示和隐藏addDialogVisible:false,//添加用户表单数据addForm:{username:'',password:'',email:'',mobile:''},//添加表单验证规则对象addFormRules:{username:[{required:true,message:'Pleaseenteryourusername',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'},{validator:checkEmail,trigger:'blur'}],mobile:[{required:true,message:'Pleaseenteryourmobilephone',trigger:'blur'},{validator:checkMo胆汁，触发器：'模糊'}]}}}，创建（）{this。getUserList()},methods:{asyncgetUserList(){const{data:res}=awaitthis.$http。get('users',{params:this.queryInfo})if(res.meta.status!==200)returnthis.$message.error(res.meta.msg)console.log(res)this.userList=res.data.usersthis.total=res.data.total},//监听pagesize改变的事件handleSizeChange(newSize){this.queryInfo.pagesize=newSizethis.getUserList()console.log(newSize)},//监听页码值的变化EventhandleCurrentChange(newPage){this.queryInfo.pagenum=newPagethis.getUserList()console.log(newPage)},//修改用户状态asyncuserStateChanged(userInfo){const{data:res}=awaitthis.$http。put(`users/${userInfo.id}/state/${userInfo.mg_state}`)if(res.meta.status!==200){userInfo.mg_state=!userInfo.mg_statereturnthis.$message.error(res.meta.msg)}this.$message.success(res.meta.msg)},//监听添加用户对话框的关闭事件asyncaddDialogClosed(){//重置表单this.$refs.addFormRef.resetFields()},//点击按钮添加新用户addUser(){this.$refs.addFormRef.validate(asyncvalid=>{if(!valid)return//可以发起网络请求添加用户const{data:res}=awaitthis.$http.post('users',this.addForm)if(res.meta.status!==201)returnthis.$message.error(res.meta.msg)//添加成功this.$message.success(res.meta.msg)//隐藏弹框this.addDialogVisible=false//刷新用户列表this.getUserList()})}}太晚了，继续明天~