在vue+element的項(xiàng)目中，需要對(duì)form表單下的一個(gè)form item中校驗(yàn)多項(xiàng)數(shù)據(jù)：
1.Dom結(jié)構(gòu)如下
表單驗(yàn)證的時(shí)候：
prop改為 “:prop”船响，形式為’List.’+index+’.startDate’
‘List.’+index+’.startDate’就是數(shù)據(jù)結(jié)構(gòu)與數(shù)據(jù)
每一個(gè)循環(huán)中的都需要加：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="開(kāi)始時(shí)間：" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">
? ? ? ? ? <el-input v-model="item.startDate" size="mini" />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="結(jié)束時(shí)間：" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">
? ? ? ? ? <el-input v-model="item.endDate" type="password" />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="手機(jī)號(hào)：" :prop="'List.'+ index +'.phone'" :rules="rules.phone">
? ? ? ? ? <el-input v-model="item.phone" size="mini" />
? ? ? ? </el-form-item>
? ? ? </div>
? ? </el-form>
```
2. data結(jié)構(gòu)如下：rules為個(gè)表單項(xiàng)的驗(yàn)證規(guī)則
```
data() {
? return {
? ? resumes: {
? ? ? List: [{
? ? ? ? startDate: '',
? ? ? ? endDate: '',
? ? ? ? phone: ''
? ? ? }]
? ? },
? ? rules: { // 添加校驗(yàn)
? ? ? startDate: [{
? ? ? ? required: true,
? ? ? ? message: '請(qǐng)輸入開(kāi)始時(shí)間',
? ? ? ? trigger: 'blur'
? ? ? }],
? ? ? endDate: [{
? ? ? ? required: true,
? ? ? ? message: '請(qǐng)輸入結(jié)束時(shí)間',
? ? ? ? trigger: 'blur'
? ? ? }],
? ? ? phone: [{
? ? ? ? required: true,
? ? ? ? message: '請(qǐng)輸入手機(jī)號(hào)',
? ? ? ? trigger: 'blur'
? ? ? }],
? ? },
};
```
```
<el-table-column :render-header="renderHeader">
? <template slot-scope="scope">
? ? ? {{ scope.row.user }}
? </template>
</el-table-column>
```?
