今天遇到了iview动态添加表单,并且深度验证表单的问题。
功能如图:
科目可以动态新增,并且科目非空,成绩在0-100区间内。
- html部分,v-for遍历form子属性scoreList。
- 内部FormItem prop规则为[子属性].[索引].[子属性]
- rules手动指定
...
<Table border :columns="column" :data="form.scoreList">
<template slot-scope="{ row, index }" slot="subject">
<FormItem :prop="`scoreList.${index}.subject`" :label-width="0" :rules="rules.subject">
<Select v-model="form.scoreList[index].subject" transfer>
<Option v-for="(item,idx) in subjectList" :key="index + '_' + idx" :value="item.value"
:disabled="hasSelectedSubject[item.value]">
{
{item.label}}
</Option>
</Select>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="score">
<FormItem :prop="`scoreList.${index}.score`" :label-width="0" :rules="rules.score">
<Input v-model="form.scoreList[index].score" />
</FormItem>
</template>
<template slot-scope&#