elementUI的Form 表单验证中，官网文档中，默认传入的表单数据对象是对象类型，那么遇到表单数据对象是数组时该怎么处理呢，本文通过实例介绍了数组数据对象的绑定方法。
【form表单数据：】
【elementUI 表单：】
【-------------------------------------------------------------------------------------------------------】
【实现复杂数据类型表单验证：】
<!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">
<!-- 1.绑定 ---------------------------------------------------------->
<!-- <el-form label-width="100px" ref="formRef" :model="form" :rules="rules">
<template>
<h4>工作经历</h4>
<el-form-item label="工作单位" prop="unit">
<el-input placeholder="请填写工作单位" v-model="form.workExperience.unit"></el-input>
</el-form-item>
<el-form-item label="开始时间" prop="undergoStartTime">
<el-date-picker type="date" placeholder="请选择开始时间" v-model="form.workExperience.undergoStartTime"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="undergoEndTime">
<el-date-picker type="date" placeholder="请选择结束时间" v-model="form.workExperience.undergoEndTime" ></el-date-picker>
</el-form-item>
<el-form-item label="担任职务" prop="job">
<el-input placeholder="请选择担任职务" v-model="form.workExperience.job"></el-input>
</el-form-item>
<el-form-item label="离职原因" prop="cause">
<el-input placeholder="请填写离职原因" v-model="form.workExperience.cause"></el-input>
</el-form-item>
</template>
</el-form> -->
<!-- 2.循环 -------------------------------------------------------->
<!-- <el-form label-width="100px" ref="formRef" :model="form" :rules="rules" v-for="(item,index) in form.workExperience" :key="index">
<template>
<h4>工作经历-{
{
index + 1}}</h4>
<el-form-item label="工作单位" :prop=`workExperience.${
index}.unit`>
<el-input placeholder="请填写工作单位" v-model="item.unit"></el-input>
</el-form-item>
<el-form-item label="开始时间" :prop=`workExperience.${
index}.undergoStartTime`>
<el-date-picker type="date" placeholder="请选择开始时间" v-model="item.undergoStartTime"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" :prop=`workExperience.${
index}.undergoEndTime`>
<el-date-picker type="date" placeholder="请选择结束时间" v-model="item.undergoEndTime" ></el-date-picker>
</el-form-item>
<el-form-item label="担任职务" :prop=`workExperience.${
index}.job`>
<el-input placeholder="请选择担任职务" v-model="item.job"></el-input>
</el-form-item>
<el-form-item label="离职原因" :prop=`workExperience.${
index}.cause`>
<el-input placeholder="请填写离职原因" v-model="item.cause"></el-input>
</el-form-item>
</template>
</el-form> -->
<!-- 3.循环绑定并验证表单 -->
<el-form label-width="100px" ref="formRef" :model="item" :rules="rules" v-for="(item,index) in form.workExperience" :key="index">
<template>
<h4>工作经历-{
{
index + 1}}</h4>
<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" placeholder="请选择开始时间" v-model="item.undergoStartTime"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="undergoEndTime">
<el-date-picker type="date" placeholder="请选择结束时间" v-model="item.undergoEndTime" ></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',
}],
undergoEndTime: [{
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(){
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$message.success('submit!');
} else {
this.$message.error('验证不通过');
return false;
}
});
}
}
})
</script>
</html>