element form表单循环校验(动态绑定的数据)
element-ui form表单组件在vue的v-for中循环校验及校验规则设置以及prop的设置
·
一层循环嵌套时
<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'
更多推荐
已为社区贡献10条内容
所有评论(0)