el-form中校验(新增、删除)

<template>
	<div>
		<el-card class="box-card">
			<div slot="header">
				<el-button @click="resetForm('formRef')">重置</el-button>
				<el-button type="primary" @click="submitForm('formRef')">提交</el-button>
			</div>
			<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="活动名称" prop="name">
							<el-input v-model="form.name" placeholder="请输入" style="width:100%;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="活动区域" prop="region">
							<el-select v-model="form.region" placeholder="请选择" style="width:100%;">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="活动时间" prop="time">
							<el-date-picker v-model="form.time" type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="请选择" style="width:100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-for="(item,index) in form.list" :key="index">
					<el-col :span="8">
						<el-form-item label="景点" :prop="`list[${index}]`" :rules="[{ required: true, message: `景点不能为空`, trigger: 'blur' }]">
							<el-input v-model="form.list[index]" style="width: 100%" placeholder="请输入">
								<template slot="append">
									<el-button icon="el-icon-plus"  circle  @click="addRowClick" v-if="index==0"></el-button> 
                        	        <el-button icon="el-icon-minus" circle  @click="delRowClick(index)" v-else></el-button> 
								</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>
<script>

export default {
	data() {
		return {
			form: {
				name: '',
				region: '',
				time:'',
				list:['']
			},
			rules: {
				name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' }
				],
				region: [
					{ required: true, message: '请选择活动区域', trigger: 'change' }
				]
			}
		}
	},
	methods: {
		addRowClick(){
        	this.form.list.push('');
      	},
      	delRowClick(index){
        	this.form.list.splice(index,1);
      	},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log('form',this.form);
				} 
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	},
}
</script>
<style scoped></style>