vue _0">element——表单的数组渲染及校验(vue )
常见表单渲染及校验
< template>
< div class = 'test' >
< el- form ref= "form" : model= "form" : rules= "rules" >
< el- form- item label= "活动名称" prop= 'name' >
< el- input v- model= "form.name" > < / el- input>
< / el- form- item>
< el- form>
< div>
< / template>
< script>
data ( ) {
return {
form: {
name: ''
} ,
rules: {
name: [ { required: true , message: '不能为空' , trigger: 'blur' } ]
}
}
}
< / script>
复杂数组表单渲染及校验(也可以表单中嵌套另一个表单,使用v-for)
< template>
< div class = 'test' >
< el- form ref= "form" : model= "form" : rules= "rules" >
< el- form- item label= "序号" prop= "id" : rules= "{ required: true, message: '请输入', trigger: 'blur' }" >
< el- input placeholder= "请输入" v- model= "form.id" > < / el- input>
< / el- form- item>
< div v- for = "(item, index) in form.list" : key= "index" >
< el- form- item label= "名称" : prop= "`list[${index}].name`" : rules= "{ required: true, message: '请输入', trigger: 'blur' }" >
< el- input placeholder= "请输入" v- model= "item.name" > < / el- input>
< / el- form- item>
< el- form- item label= "年龄" : prop= "`list[${index}].age`" : rules= "{ required: true, message: '请输入', trigger: 'blur' }" >
< el- input placeholder= "请输入" v- model= "item.age" > < / el- input>
< / el- form- item>
< el- form- item label= "手机号" : prop= "`list[${index}].phone`" : rules= "{ required: true, message: '请输入', trigger: 'blur' }" >
< el- input placeholder= "请输入" v- model= "item.phone" maxlength= "11" > < / el- input>
< / el- form- item>
< / div>
< el- form>
< div>
< / template>
< script>
data ( ) {
return {
form: {
id: '' ,
list: [
{
name: 'hh' ,
age: 10 ,
phone: '12312323'
} ,
{
name: 'xx' ,
age: 20 ,
phone: 'sdffafasdf'
} ,
{
name: 'dd' ,
age: 30 ,
phone: 'sdfsdfsdf'
}
]
}
}
}
< / script>