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

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>