html
<el-form-item label="时间段" required>
<template v-for="(item,index) in ruleForm.list">
<!-- <div :key="index">-->
<!-- <el-input v-model="item.start"></el-input>-->
<!-- <el-input v-model="item.end" class="ml10"></el-input>-->
<!-- <span >-->
<!-- <i class="el-icon-circle-plus-outline icon" @click="add('list')"></i>-->
<!-- <i class="el-icon-remove-outline icon" @click="del('list',index)"></i>-->
<!-- </span>-->
<!-- </div>-->
<div>
<el-form-item label="" :prop="'list[' + index + '].start'" :rules="rules.start">
<div :key="index">
<el-input v-model="item.start"></el-input>
</div>
</el-form-item>
<el-form-item label="" :prop="'list[' + index + '].end'" :rules="rules.end">
<div :key="index">
<el-input v-model="item.end"></el-input>
</div>
</el-form-item>
<span >
<i class="el-icon-circle-plus-outline icon" ></i>
<i class="el-icon-remove-outline icon" ></i>
</span>
</div>
</template>
</el-form-item>
js
ruleForm: {
type: [],
region: '',
name: '',
list: [
{
start: '',
end: '',
}
]
},
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
type: [
{required: true, message: '请选择活动性质', trigger: 'change'}
],
region: [
{required: true, message: '请选择活动区域', trigger: 'change'}
],
start: [
{required: true, message: '请输入开始时间'}
],
end: [
{required: true, message: '请输入结束时间'}
],
}
事件
this.$refs['ruleForm'].validate(valid => {
console.log(valid, 'valid')
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});