iview form组件，当formItem嵌套使用时，formData会是多层结构的json数据，导致async-validator验证插件失效

同学们可以私信我加入学习群！

---

---

前言

---

一、问题描述

在项目中遇到个多层的json数据渲染到页面中，第一层渲染成卡片，第二层渲染成列表，第三层才真正渲染成input标签的场景。
这种多层form数据的场景，无法在form标签中定义:rules变量来实现表单验证。
最终实现的效果如图：

第一个卡片两条数据之间的验证互不影响，第一个卡片和第二个卡片之间互不影响，而所有卡片都由一个form渲染，这样有利于直接生成一个formData。

二、解决方案

这种场景需要在formItem标签中使用:prop和:rules变量，来为每一项formItem定义规则。

难点在于，:props的定义:

      <FormItem
                  prop="name_test"
                  :prop="'rules.' + ruleIndex + '.conditionValueLeft'"
                  :rules="{required: true, message: 'Item  can not be empty', trigger: 'blur'}">
                <Input type="text" v-model="ruleItem.conditionValueLeft"></Input>
              </FormItem>
1
2
3
4
5
6

卡片的渲染不赘述了，主要是每个card标签里面定义一个完整的form表单：

<Form :model="formRules" ref="form">
    <template v-for="(ruleItem, ruleIndex) in formRules.rules" :key="formDataItem.id+''+ruleIndex">
      <FormItem
          prop="name"
          class="card-form-item"
          :class="{current:ruleIndex==currentRuleIndex && formDataIndex==currentFormDataIndex}"
      >
        <Row :gutter="8">
          <Col span="5">
            <FormItem prop="conditionField">
              <Select v-model="ruleItem.conditionField">
                <Option v-for="item in conditionKeyList" :value="item.key" :key="item.key">{{ item.name }}</Option>
              </Select>
            </FormItem>

          </Col>
          <Col span="4">
            <Select v-model="ruleItem.conditionOption">
              <Option v-for="item in conditionOptionList" :value="item.key" :key="item.key">{{ item.name }}</Option>
            </Select>
          </Col>
          <Col span="14">
            <div v-if="ruleItem.conditionOption=='between'" style="display: flex">
              <FormItem
                  prop="name_test"
                  :prop="'rules.' + ruleIndex + '.conditionValueLeft'"
                  :rules="{required: true, message: 'Item  can not be empty', trigger: 'blur'}">
                <Input type="text" v-model="ruleItem.conditionValueLeft"></Input>
              </FormItem>
              <span>至</span>
              <FormItem prop="conditionValueLeft">

                <Input type="text" v-model="ruleItem.conditionValueRight"></Input>
              </FormItem>

            </div>
            <Input v-else type="text" v-model="ruleItem.conditionValue" placeholder="Enter something..."></Input>
          </Col>

        </Row>
        <Divider>
          <Icon type="md-trash" v-if="showRemoveRule(ruleIndex)" class="form-item-handle"
                @click="handleRemoveRule(ruleIndex)"
                @mouseover="setCurrentIndex(formDataIndex,ruleIndex)" @mouseout="setCurrentIndex(-1)"
                color="#ed4014"/>
          <Icon v-if="showAddRule(ruleIndex)" type="md-add-circle" class="form-item-handle"
                @click="handleAddRule(formDataIndex)" color="#2db7f5"/>
        </Divider>
      </FormItem>
    </template>
  </Form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

这是一个复杂查询的业务场景，每个卡片为一个独立的form，form表单的data为formRules，formRules.rules是自定义的复杂查询规则，循环渲染rules后，每个循环体都是一个formItem，而因为每个规则里还会存在多个输入框的情况，所以需要在formItem里再嵌套formItem来区分两个input标签。

:prop="'rules.' + ruleIndex + '.conditionValueLeft'"
1

rules[ruleIndex]表示循环体formItem，conditionValueLeft表示需要规则定义的formItem的props别名

---

总结

这段代码要在项目中删了，所以简单记录下，免得后面忘了