el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）

场景：在el-table表格中嵌入表单元素，写法如下

注意两点：动态生成 el-form-item的 prop 以及给el-form-item设置rules属性

一、一般v-for循环生成表单元素，prop验证规则写法

:prop写法如下
       <div v-for="(v, i) in standardSetForm.methods" :key="i">
            <el-form-item
                :prop="`methods[${i}].reduceScore`"
                :rules="standardRules.reduceScore"
                label-width="0"
                style="display: inline-block; width: 150px"
            >
                <el-input
                    v-model="v.reduceScore"
                    style="width: 64px"
                ></el-input>
            </el-form-item>
        </div>

二、表格嵌套表单元素，prop验证规则写法

页面如下：

 

 

绑定数据：

table ：

　　 :data="planFormData.allocationPlan"

el-form-item：

　　v-model="scope.row.shouldDisburseTotal"

表单验证规则：

el-form-item:　　　　　　　

　　:prop="'allocationPlan.'+scope.$index+'.shouldDisburseTotal'"  :rules="rules.shouldDisburseTotal"

1.表格数据data字段

表格数据为：planFormData.allocationPlan

表单元素绑定字段为：planFormData.allocationPlan[i].shouldDisburseTotal

planFormData: {
        allocationTime: "",
        allocationPlan: [], 
      },

2.表格页面结构如下

<el-table
                :data="planFormData.allocationPlan"
                id="allocationPlan"
                max-height="350px"
                border
                v-loading="isLoading"
                style="width:960px;font-size:14px;color:#333333;margin-top:10px"
              >
                <el-table-column label="xxxx" align="center">
                  <template
                    slot-scope="scope"
                  >{{scope.row.startDate}}&nbsp;至&nbsp;{{planFormData.allocationTime?scope.row.endDate:'(请选择xxxx时间)'}}</template>
                </el-table-column>
                <el-table-column label="xxxx" align="center">
                  <template slot-scope="scope">
                    <el-form-item
                      v-if="scope.$index<planFormData.allocationPlan.length-1"
                      style="margin-top:22px;width:265px;margin-left:100px"
                      :prop="'allocationPlan.'+scope.$index+'.shouldDisburseTotal'"
                      :rules="rules.shouldDisburseTotal"
                      label-width="0"
                    >
                      <el-input
                        v-model="scope.row.shouldDisburseTotal"
                        @blur="checkLastCost"
                        style="width:240px"
                        class="table-input"
                      ></el-input>&ensp;元
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>

注意点： 生成表格数据时，初始化表单元素数据，导致input框无法输入

dateArr.forEach((v, i) => {
   // this.planFormData.allocationPlan[i] = {};
   // this.planFormData.allocationPlan[i].startTime = v[0];
   // this.planFormData.allocationPlan[i].endTime = v[1];
   // this.planFormData.allocationPlan[i].shouldDisburseTotal = null;
)}

 解决办法：

1.在data中的 planFormData.allocationPlan 对象数组 给出默认值

2.不要在数组循环时分别给表单元素绑定值，利用深拷贝给表单元素一次赋值

let planArr = [];
dateArr.forEach((v, i) => {
   // planArr[i] = {};
   planArr[i].startDate = v[0];
   planArr[i].endDate = v[1];
   planArr[i].shouldDisburseTotal = this.planFormData.allocationPlan[i].shouldDisburseTotal;
});
this.planFormData.allocationPlan = JSON.parse(JSON.stringify(planArr));