el-form的入门学习

el-form的入门学习
知识点
el-form标签的核心元素
1. :model用于保存表单的数据对象
2. :rules用于对表单数据对象的校验
3. ref指定表单对象名称
4. label-width指定label的宽度
5. :label-position指定label的位置
6. :inline指定是否同行
7. size指定所有组件大小
el-form-item标签的核心元素
1. label设置内容
2. prop指定:rules中的属性
3. required指定必填
4. :rules可以设置当前prop的校验，一般数值类型的校验可在此单独设置，要指定type:'number'，与v-model.number配合使用,注意点有提及
5. size指定单一组件大小
注意点
1. :model的数据属性和:rules的属性相对应
2. 一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框
3. 日期类型的数据，校验要指定type:'date'
4.  选择框的value为数值，校验需要指定type:'number'
5.  单选按钮和多选按钮为数值，校验需要指定type:'number'
6. 输入框想要转换成为数值类型，可以使用v-model.number，校验需要指定type:number'
7. 输入框想要校验邮箱格式，只需要指定type:'email'
8. 嵌套在el-input中的el-select不能实现联动校验，若想实现联动校验，需要@change自定义调用校验
9. rules的简单校验有三个属性：required,message,trigger,分别为：是否必填，校验失败提示信息，校验时机
10. 如果要自定义校验规则，需要属性validator:(rule,value,callback)=>{手动校验代码块},rule参数数据很丰富，为一个Object类型的数据，有field,type,validator,required等属性，value为:model属性的值，callback(str)为要返回的信息
11. 单选框，多选框，日期框，选择框的校验时机都应该指定为change,符合业务场景
12. 动态添加或删除form表单的组件，需要动态配置好label,prop,rule的数据，删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
13. 重置按钮：this.$refs['refName'].resetFields();，清空了校验，表单数据也恢复初始值
14. 校验单个组件：this.$refs['refName'].validateField('propName');进行了单个校验
15. 校验全部：this.$refs['refName'].validate(valid=>{});表单整体校验，一般提交按钮需要触发全部校验

链接地址：https://blog.csdn.net/qq_40765784/article/details/125167724?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5-125167724-blog-120741908.pc_relevant_multi_platform_featuressortv2dupreplace&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5-125167724-blog-120741908.pc_relevant_multi_platform_featuressortv2dupreplace&utm_relevant_index=8