In the Form form verification of elementUI, in the official website document, the form data object passed in by default is an object type, so what to do when the form data object is an array, this article introduces the binding method of the array data object through an example.
[form form data:]
[elementUI form:]
[----------------------------------------------- -------------------------------------------------- ---------]
[Implement complex data type form validation:]
<!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>