在vue+element的项目中，需要对form表单下的一个form item中校验多项数据：
1.Dom结构如下
表单验证的时候：
prop改为 “:prop”，形式为’List.’+index+’.startDate’
‘List.’+index+’.startDate’就是数据结构与数据
每一个循环中的都需要加：rules
```
<el-form :model="resumes" size="mini" :rules="rules" ref="resumes">
<div v-for="(item, index) in resumes.List" :key="index">
<el-form-item label="开始时间：" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">
<el-input v-model="item.startDate" size="mini" />
</el-form-item>
<el-form-item label="结束时间：" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">
<el-input v-model="item.endDate" type="password" />
</el-form-item>
<el-form-item label="手机号：" :prop="'List.'+ index +'.phone'" :rules="rules.phone">
<el-input v-model="item.phone" size="mini" />
</el-form-item>
</div>
</el-form>
```
2. data结构如下：rules为个表单项的验证规则
```
data() {
return {
resumes: {
List: [{
startDate: '',
endDate: '',
phone: ''
}]
},
rules: { // 添加校验
startDate: [{
required: true,
message: '请输入开始时间',
trigger: 'blur'
}],
endDate: [{
required: true,
message: '请输入结束时间',
trigger: 'blur'
}],
phone: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
},
};
```
```
<el-table-column :render-header="renderHeader">
<template slot-scope="scope">
{{ scope.row.user }}
</template>
</el-table-column>
```
网友评论