element form表单循环校验(动态绑定的数据)

46 篇文章 1 订阅
16 篇文章 1 订阅

一层循环嵌套时

<el-form :model="addform"
         ref="addform"
         :rules="rules">
  <el-form-item required
                label="姓名"
                v-for="(item, index) in addform.resourceList"
                :key="index"
                :prop="`resourceList.${index}.name`"
                :rules="rules.name">
    <el-input v-model="item.name"></el-input>
  </el-form-item>
</el-form>

 data数据结构及校验规则

data() {
    return {
        addform: {
            resourceList: [{
                name: ''
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }]
        },
    }
},

 prop应该写成 如 :prop="'resourceList.' + index + '.name'"
 prop格式为 '遍历的数组 . ' + 下标index + ' . 实际需要校验的key'

多层循环嵌套时 

<el-form :model="formData" :rules="rules" ref="ruleForm">
	<div v-for="(item, index) in formData.oneCycle" :key="index">
		<el-form-item label="姓名" :prop="`oneCycle.${index}.name`" :rules="rules.name">
			<el-input v-model="item.name"></el-input>
		</el-form-item>
		<div v-for="(itemSon, indexSon) in item.towCycle" :key="indexSon">
			<el-form-item label="性别" :prop="`oneCycle.${index}.towCycle.${indexSon}.sex`" :rules="rules.towCycle.sex">
				<el-input v-model="itemSon.sex"></el-input>
			</el-form-item>
			<el-form-item label="年龄" :prop="`oneCycle.${index}.towCycle.${indexSon}.age`" :rules="rules.towCycle.age">
				<el-input v-model="itemSon.age"></el-input>
			</el-form-item>
		</div>
	</div>
</el-form>

  data数据结构及校验规则

data() {
    return {
        formData: {
            oneCycle: [{
                name: '',
                towCycle: [{
                    sex: '',
                    age: ''
                }]
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }],
            towCycle: {
                sex: [{
                    required: true,
                    message: '请输入性别',
                    trigger: 'blur'
                }],
                age: [{
                    required: true,
                    message: '请输入年龄',
                    trigger: 'blur'
                }]
            }
        },
    }
},

 prop应该写成 如 :prop="'oneCycle.' + index + '.towCycle' + indexSon + ‘.sex’"
 prop格式为 '遍历的一级数组 . ' + 下标index + ‘.遍历的二级数组’+ 二级数组下标index + ' . 实际需要校验的key'

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 Vue Element 的表单验证规则来实现多层循环的动态添加校验规则。下面是一个简单的示例代码,演示了如何使用 v-for 指令循环生成表单项,并动态添加校验规则: ```html <template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop"> <el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, // 表单数据 formItems: [ // 表单项配置 { label: '姓名', prop: 'name', placeholder: '请输入姓名' }, { label: '年龄', prop: 'age', placeholder: '请输入年龄' }, // ... ], formRules: {} // 表单校验规则 }; }, mounted() { this.generateFormRules(); }, methods: { generateFormRules() { this.formItems.forEach(item => { // 根据不同的表单项生成对应的校验规则 // 这里只是示例,你可以根据实际需求进行修改 this.$set(this.formRules, item.prop, [ { required: true, message: `请输入${item.label}`, trigger: 'blur' }, // 其他校验规则... ]); }); } } }; </script> ``` 在上面的示例中,表单项的配置存储在 `formItems` 数组中,你可以根据实际需求自行修改。在 `generateFormRules` 方法中,通过遍历 `formItems` 数组,动态生成表单校验规则,并将其存储在 `formRules` 对象中。最后,在 `<el-form>` 组件上使用 `:rules` 属性绑定表单校验规则。 这样,你就可以实现多层循环动态添加校验规则的功能了。记得根据实际需求修改校验规则的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值