一：问题

在使用循环遍历数组中，进行动态加入验证，保证每个输入提交合法，主要采用 v-decorator，但是在进行循环时，容易导致全部同样输入，

主要问题在于key的唯一才可以校验，

二：解决方案

1：新增

 <a-col
                  :md="24"
                  :sm="24"
                  label=""
                  v-for="(item,index) in nextWeeklyReportList"
                  :key="item.key"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  has-feedback>
                  <div style="display: flex;justify-content: left;" v-if="index<=4" class="weekreport-box">
                    <span style="color: red;margin-top: 8px" >*</span>

                    <a-form-item style="display: flex;justify-content: left;">
                      <span >{{ item.name1 }}</span>
                      <a-input
                        v-model="item.value1"
                        v-decorator="[`nameNextkey${index+1}`,{ rules: [{ required: true, message: '请输入'+item.name1+'!' }] },]"
                        style="width: 120px;border: 0; border-bottom: 1px solid #d9d9d9;" />
                    </a-form-item>

                    <a-form-item class="value-box">
                      <span >，{{ item.name2 }}</span>
                      <a-textarea
                        v-model="item.value2"
                        placeholder=""
                        v-decorator="[`valueNextkey${index+1}`,{ rules: [{ required: true, message: '请输入'+item.name1+'内容!' }] },]"
                        style="flex: 1;border: 0; border-bottom: 1px solid #d9d9d9;"

                        :auto-size="{ minRows: 1, maxRows: 5 }" />
                    </a-form-item>
                  </div>
                

                </a-col>

2：编辑

   <a-col
                  :md="24"
                  :sm="24"
                  label=""
                  v-for="(item,index) in currentWeekDataSource"
                  :key="item.id"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"

                  has-feedback>
                  <div style="display: flex;justify-content: left;" v-if="index<=4" class="weekreport-box">
                    <span style="color: red;margin-top: 8px" >*</span>

                    <a-form-item style="display: flex;justify-content: left;">

                      <span >{{ item.name1 }}</span>

                      <a-input
                        v-model="item.value1"
                        v-decorator="[`'namekey${index+1}'`,{ rules: [{ required: true, message: '请输入'+item.name1+'!' }] ,initialValue: item.value1},]"
                        style="width: 120px;border: 0; border-bottom: 1px solid #d9d9d9;" />
                    </a-form-item>

                    <a-form-item class="value-box">
                      <span >，{{ item.name2 }}</span>
                      <a-textarea
                        v-model="item.value2"
                        placeholder=""
                        v-decorator="[`valuekey${index+1}`,{ rules: [{ required: true, message: '请输入'+item.name1+'内容!' }],initialValue: item.value2 },]"
                        style="flex: 1;border: 0; border-bottom: 1px solid #d9d9d9;"

                        :auto-size="{ minRows: 1, maxRows: 5 }" />
                    </a-form-item>
                  </div>
             

                </a-col>

三：核心代码

1：主要是通过v-decorator，进行保持key唯一性，

2：在编辑回显时，initialValue进行默认值赋值

v-decorator="[`valuekey${index+1}`,{ rules: [{ required: true, message: '请输入'+item.name1+'内容!' }],initialValue: item.value2 },]"

 this.nextWeekDataSource.map((item, index) => {

        const namekey = `nameNextkey${index + 1}`
        const valuekey = `valueNextkey${index + 1}`
        // 修改 item 的特定属性
        item[namekey] = ''
        item[valuekey] = ''
      })

四：成果

五：总结

1：编辑时候需要进行默认赋值，才可以回显

2：通过循环方式，需要保证校验值唯一性

六：链接地址

Ant Design Vue