1.功能需求:使用element的表单验证方式,动态for循环的场景如何使用?如下图所示:
2.dom结构如下(重点)
注意:
1. userList和其他表单项在同一个form表单中
2.prop改为:prop,形式为'userList.'+index+'.name'
3.每一个循环中的<el-form-item>都需要加:rules
<el-form :model="addInfo"
size="mini"
:rules="rules"
ref="addInfo">
<el-form-item label="名称"
prop="title">
<el-input v-model="addInfo.title" size="mini"/>
</el-form-item>
<div v-for="(item, index) in addInfo.userList" :key="index">
<el-form-item label="账号:"
:prop="'userList.'+ index +'.name'"
:rules="rules.username">
<el-input v-model="item.username"
size="mini"/>
</el-form-item>
<el-form-item label="密码:"
:prop="'userList.'+ index +'.password'"
:rules="rules.password">
<el-input v-model="item.password"
type="password"/>
</el-form-item>
<el-form-item label="手机号:"
:prop="'userList.'+ index +'.phone'"
:rules="rules.phone">
<el-input v-model="item.phone"
size="mini"/>
</el-form-item>
</div>
</el-form>
3.data结构如下:rules为个表单项的验证规则,addInfo是表单绑定的数据结构
data(){
return {
rules: {
name: [{
required: true,
message: '请输入名称',
trigger: 'blur'}],
phone: [{
required: true,
message: '请输入账号手机号',
trigger: 'blur'}],
username: [{
required: true,
message: '请输入账号名称',
trigger: 'blur'}],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'}
]
}, // 添加校验
addInfo: {
name: '',
userList: [{
phone: '',
username: '',
password: ''
}]
}
};