element——表单的复杂数组渲染

￡神魔★判官ぃ 2022-10-29 05:16 210阅读 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>