＜el-form＞的使用总结

一、一般结构

<el-form :modle='form' ref='formRef' :inline='false'>
    <el-form-item label='姓名'>
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label='姓名'>
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label='姓名'>
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>
// 可以看出 form 表单一般由一个<el-form>标签包含多个<el-form-item>组成
// <el-form-item> 可以包含的表单控件:
//Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
// :model='form' 是el-form的数据源
// :inline = 'false' 默认是非内显示
// :inline = 'true'  设置表单行内显示

 二、表单验证

表单验证的重点在于设置rules,验证规则

// 表单结构
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" 
label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item label="class" prop="class">
    <el-input v-model="ruleForm.class"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">立即创建</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>

//表单数据源
ruleForm:{
    name:'',
    age: '',
    class: ''
}
// 表单验证规则 rules
rules:{
    name:[{required: true,message:'请填写姓名', trigger:'blur'}],
    age:[{required: true, type:'number',message:'晴填写年龄', trigger:'blur'}]
    calss:[{required: true,message:'请填写班级', trigger:'blur'}]
}
// 表单验证函数，当表单中有未通过的item不提交表单数据
submitForm()｛
    this.$refs.ruleForm.validate((validate)=>{
         if(validate){  // 验证通过
             // 这里写提交表单数据逻辑
         } else {  // 表单中存在验证没有通过的item            
        }
    })
｝
// 重置表单
resetForm()｛
   this.$refs.ruleForm.resetFields()
｝