element ui 框架个人总结

最近在用element ui做毕设，总结一下遇到的坑

（本人新手，大神勿喷）

1.el-radio单选框在做回显时，发现点击单选框，绑定的数据发生改变，但el-dialog对话框内容却没变，解决办法：首先给el-radio绑定一个change事件，然后定义一个方法，如下：

<el-radio @change="changeEvent" ></el-radio>


methods:{
	changeEvent(){
           this.$forceUpdate();
           }
}

2.在写表单校验规则时要注意的问题:
（1）form表单的ref一定要写
（2）prop绑定的名字一定和校验规则的字段一致
（3）自定义校验规则时，每一种情况记得都写new callback(),否则可能会不报错，但校验也不通过
表单代码：

<el-form :model="user" :rules="addUserRules" ef="addUserForm1" label-width="100px">
	<el-form-item label="用户名" prop="userName">
		<el-input v-model="user.userName"></el-input>
	</el-form-item>
	<el-form-item label="密码" prop="pwd">
		<el-input v-model="user.pwd"></el-input>
	</el-form-item>
	<el-form-item label="手机号" prop="tel">
		<el-input v-model="user.tel"></el-input>
	</el-form-item>
	<el-form-item label="邮箱" prop="email">
		<el-input  v-model="user.email"></el-input>
	</el-form-item>
</el-form>
                

校验规则代码

addUserRules:{
    userName: [{required: true,validator:checkUserName,trigger: 'blur'},],
    pwd: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
    tel: [{ required: true, validator:checkTel,trigger:'blur'}],
    email: [ { required: true, validator:checkEmail, trigger: 'blur' },],
  roleId:[{required:true,validator:checkRole,trigger:'change'} ]
}
===============================================================================
//校验手机号
const checkTel = async (rule,value,callback)=>{
  if(value){
    var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
    if (!phonereg.test(value)) {
      new callback('手机号格式不正确')
    }else{
      const res = await this.$http.get(`/user/checkTel/${this.user.tel}`)
      if (res.data.message==='exist'){
        new callback(new Error('该手机号已被注册'))
      }else{
        callback()
      }
    }
  }else {
    new callback(new Error('手机号不能为空'))}
}

如果本文章对您有帮助，麻烦点个赞吧~