elmentui-form表单

 <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" >
        <el-form-item label="店铺类型：" prop="status1">
          <el-radio-group v-model="form.status1" >
            <el-radio label="1">淘宝</el-radio>
            <el-radio label="2">天猫</el-radio>
            <el-radio label="3">拼多多</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="店铺主账号：" prop="storeresource">
          <el-input type="text" v-model="form.storeresource"></el-input>
        </el-form-item>
        <el-form-item label="店铺名：" prop="storeName">
          <el-input type="text" v-model="form.storeName"></el-input>
        </el-form-item>
        <el-form-item label="店铺性质：" prop="status2">
          <el-radio-group v-model="form.status2">
            <el-radio label="1">企业</el-radio>
            <el-radio label="2">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item >
          <el-button  type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button  @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>

表单绑定的数据对象，表单头部绑定这个对象，表单内部的控件绑定这个对象内部的属性
 form: {
          status1:'',
          status2:'',
          storeresource:'',
          storeName:'',
        },


表单验证的规则对象，给from头部绑定:rules="rules"  即开启了表单验证
prop="status1"把这串代码配置在el-form-item标签上就可以开始验证了


   rules:{
          storeresource:[
            { required: true, message: '请输入店铺主账号', trigger: 'blur' }, 
// trigger: 'blur' 代表失去输入框失去焦点的时候开始验证
          ],
          storeName:[
            { required: true, message: '请输入店铺名', trigger: 'blur' },
          ],
          status1: [
            { required: true, message: '请选择店铺类型', trigger: 'change' }
//trigger: 'change' 代表值发生变化的时候开始验证
          ],
          status2: [
            { required: true, message: '请选择店铺性质', trigger: 'change' }
          ],
        },


//清除验证
resetForm(formName) {
        this.from = {}
        this.addstoreShow = false
        this.$refs[formName].resetFields();
      },
//提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //验证通过
          } else {
//验证不通过，弹出提示
            return false;
          }
        });
        console.log(this.form)
      },

注意：表单域的item项的prop与组件的绑定值v-model的值要一样，比如 prop="a1" 那么v-model的值也要等于"a1"！！！ image.png