<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
<link
href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css"
rel="stylesheet"
/>
<style>
.el-button,.el-date-editor.el-input, .el-date-editor.el-input__inner{width: 100%;}
</style>
</head>
<body>
<div id="app">
<!-- 循环 -->
<!-- 绑定属性 -->
<el-form :model="item" :rules="rules" label-width="100px" ref="formRef" v-for="(item, index) in form.workExperience" :key="index">
<template >
<h4>工作经历-序号</h4>
<!-- 做验证 -->
<!-- 1.得到规则:rules[unit] -->
<!-- 2.得到数据:form.workExperience[0][unit] -->
<el-form-item label="工作单位" prop="unit">
<el-input placeholder="请填写工作单位" v-model="item.unit"></el-input>
</el-form-item>
<el-form-item label="开始时间" prop="undergoStartTime">
<el-date-picker type="date" v-model="item.undergoStartTime" placeholder="请选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="undergoStartTime">
<el-date-picker type="date" v-model="item.undergoEndTime" placeholder="请选择结束时间"></el-date-picker>
</el-form-item>
<el-form-item label="担任职务" prop="job">
<el-input placeholder="请选择结束时间" v-model="item.job"></el-input>
</el-form-item>
<el-form-item label="离职原因" prop="cause">
<el-input placeholder="请填写离职原因" v-model="item.cause"></el-input>
</el-form-item>
</template>
</el-form>
<el-row>
<el-button @click="add">添加工作经历</el-button>
</el-row>
<el-row style="margin-top: 10px;">
<el-button type="primary" @click="submit">提交</el-button>
</el-row>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
form: {
workExperience: [{
unit: '',
isWoke:false,
undergoStartTime: '',
undergoEndTime:'',
job: '',
cause: '',
}]
},
rules: {
unit: [{
required: true,
message: '请输入工作单位',
trigger: 'blur',
}],
undergoStartTime: [{
required: true,
message: '请选择起止时间',
trigger: 'blur',
}],
undergoStartTime: [{
required: true,
message: '请选择结束时间',
trigger: 'blur',
}],
job: [{
required: true,
message: '请输入担任职务',
trigger: 'blur',
}],
cause: [{
required: true,
message: '请选输入离职原因',
trigger: 'blur',
}]
},
}
},
methods: {
add(){
this.form.workExperience.push({
unit: '',
isWoke:false,
undergoStartTime: '',
undergoEndTime:'',
job: '',
cause: '',
})
},
async submit(){
// 验证表单
/*
let isAllOk = true
this.$refs.formRef.forEach(t=>{
t.validate(isOk=>{
if(!isOk){
isAllOk = false
}
})
})
*/
// 用promise简化操作
/*
let isAllOk = true
let list = []
this.$refs.formRef.forEach(t=>{
list.push(t.validate())
})
try{
await Promise.all(list)
}catch(error){
isAllOk = false
}
if(isAllOk){
console.log('验证通过')
}else{
console.log('验证失败')
}
*/
//用map简化操作
try{
await Promise.all(this.$refs.formRef.map(t=>t.validate()))
console.log('验证通过')
}catch(error){
console.log('验证失败')
}
}
}
})
</script>
</html>
版权声明：本文为weixin_48010432原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。