用的循环el-form, :model绑定循环的item,也就是数组中的单个对象,然后prop绑定参数,rules正常写, 然后提交的时候,因为el-form是循环的,所以用ref绑定的fForm是一个数组,要循环校验 fForm.value.forEach((item:any) =>{ item.validate((vali:boolean) =>{if(vali){// 校验通过} }) }) 这样就能对数据进...
注意绑定的结果值是数组即可 最后不要忘了回显逻辑哦 el-form表头数据举例 子组件表单数据根据根据父组件传递过来的formHeader动态渲染。即v-for中搭配v-if去呈现,先简单看一下formHeader数据结构,具体在后边代码中都有的 // 表头数组数据 formHeader: [ { itemType: "text", // 输入框类型 labelName: "姓名...
-- el-form重点双重嵌套, model绑定的是item,也就是array下的每一项,规则是新的, 因为是多个el-form,所以这里的itemRef是数组,验证规则请看methods --> <el-form :model="item" :rules="itemRules" ref="itemRef"> <!-- prop绑定的是array下每一项的key值 --> <el-form-item prop="go"> <el-...
//1.初始化的时候要设置为一个空的数组editData:{headImageUrl:'',nickName:'',studentNumber:null,sex:null,dateOfBirth:'',ilicenseNo:'',nation:null,appointmentTime:null,politicsStatus:null,nativePlace:null,gradeClass:[]};//2.自定义写rules<el-form-itemlabel="年级班级"prop="gradeClass":rules=...
除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空 其tempalte部分主要代码如下所示: <el-form:model="form"ref="cardForm":rules="rules"label-position="top"><el-form-itemv-for="(item, ind...
第一步:el-form标签下开始循环。 第二步:每个el-form-item标签内绑定:prop(校验项) 与:rules(校验规则)。 然后是data(){}里的变量list。注意:list是对象,包裹着数组arr list:{arr: [{fuzeSearchText:'',dailiSearchText:'',departmentName:'',personChargeNo:'',personChargeName:'',personChargeNamePy:...
注意绑定的结果值是数组即可 最后不要忘了回显逻辑哦 el-form表头数据举例 子组件表单数据根据根据父组件传递过来的formHeader动态渲染。即v-for中搭配v-if去呈现,先简单看一下formHeader数据结构,具体在后边代码中都有的 // 表头数组数据 formHeader: [ { itemType: "text", // 输入框类型 labelName: "姓名...
el-form-item组件实现 el-form组件实现 组件实现中遗留的问题 源码解析 参考文献 前言 最近在用elementUI的form表单组件的时候,在实现嵌套表单的校验的时候,遇到了一些困难,我想之所以困难的原因在于我对elementui里的form表单组件不够熟悉,于是就深入了解了一下源码,并尝试自己去实现一个自己的form表单 ...
</el-form> </template> <script> export default { data() { return { form: { name: '', pwd:'' } } }, methods: { onSubmit() { console.log('submit!'); } } } </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. ...