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));