需求
点击按钮 新增时间选择器和一个下拉框
如图
点击加号后
<el-form-item label="报名时间:" class="required time-register" :label-width="subsidiaryFormLabelWidth">
<el-row v-for="(domain, index) in domains" :key="index" style="margin-bottom: 20px">
<el-col :span="8">
<el-form-item label="" :prop="`content`+index" :rules="subsidiaryFormRules.content">
<el-date-picker
style="width: 160px"
v-model="domain.content"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :prop="`explicit`+index" :rules="subsidiaryFormRules.explicit">
<el-select
v-model="domain.explicit"
placeholder="请选择"
clearable
style="width: 100px;"
>
<el-option
v-for="(item,index) in timeList"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<i
style="font-size: 20px;margin-right: 20px"
class="el-icon-remove"
@click.prevent="removeDomain(domain)"
></i>
<i class="el-icon-circle-plus" style="font-size: 20px" @click.prevent="addDomain"></i>
</el-row>
</el-form-item>
data(){
domains: [{
explicit: '',
content: ''
}],
timeList: [
'上午', '下午', '全天'
],
subsidiaryFormRules: { //自定义规则,
content: [{validator: contentValidtor, trigger: "blur"}],
explicit:[{validator: explicitValidtor, trigger: "change"}],
}
}
methods:{
// 属性名称校验
removeDomain(item) {
var index = this.domains.indexOf(item)
if (index !== 0) {
this.domains.splice(index, 1)
}
},
addDomain() {
let _this = this
console.log(_this.domains, '我为什么是unde啊')
_this.domains.push({
value: '',
key: Date.now()
});
},
}
具体规则具体自己填写,多的就不说,内容很简单,记录工作时遇到的问题