用的循环el-form, :model绑定循环的item,也就是数组中的单个对象,然后prop绑定参数,rules正常写, 然后提交的时候,因为el-form是循环的,所以用ref绑定的fForm是一个数组,要循环校验 fForm.value.forEach((item:any) =>{ item.validate((vali:boolean) =>{if(vali){// 校验通过} }) }) 这样就能对数据进...
①设置el-form-item的prop值 与formdata中定义的key保持一致` ②如果rules需要通过el-form统一设置,rules的key定义也与prop保持一致(如果不一致,需要在 el-form-item 中 手动指定) ③复杂的校验函数可通过validator单独定义 <el-form class="demo-form":model="form":rules="rules" > <el-form-item label="...
</el-form> ``` 2.在el-form中定义校验规则formRules,对数组属性进行校验。 ```js data() { return { formData: { //表单其他字段 }, formRules: { //其他字段的校验规则 dataList: [ { type: 'array', required: true, message: '请至少添加一条数据', trigger: 'blur' }, //其他校验规则 ...
数组 // template<el-formref="form":model="dataForm":rules="dataFormRules"><el-form-itemv-for="(item,index) in dataForm.list":key="index":label="item.name":prop="`list[${index}].value`":rules="dataRule.list"><el-inputv-model="dataForm.list[index].value"></el-input></el-...
代码如下: // template<divv-for="(item, idx) in ruleForm.zjList":key="idx"><divclass="special"><el-form-item:label="`组件名称${idx + 1}`":prop="'zjList.' + idx + '.zjmc'":rules="zjlbRules.zjmc"class="special-com"><el-selectv-model="item.zjmc"placeholder="请选择组件"...
在上面的示例中,我们定义了一个el-form组件,其中包含一个数组的输入框。我们通过在el-form-item标签中的prop属性来指定验证规则的名称为"array"。然后,在rules中以数组的形式定义了验证规则。这个规则中使用了自定义的验证函数validateArray来验证数组是否为空。 在方法validateArray中,我们通过判断value是否是一个数组...
ruleForm: { // 动态循环项数组 formItemArr: [ { name:"", gender:"", }, ], }, AI代码助手复制代码 点击添加表格的时候,就可以直接push对应项就行啦,即,这样: // 添加一个表格addForm() {letitemObj = {name:"",gender:"", };this.ruleForm.formItemArr.push(itemObj); ...
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator 文档中提及的用法有2种: 官方form 表单文档 https://element.eleme.io/#/zh-CN/component/form ...
除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空 其tempalte部分主要代码如下所示: <el-form:model="form"ref="cardForm":rules="rules"label-position="top"><el-form-itemv-for="(item, ind...