table中加表单元素怎么验证_el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）...

场景：在el-table表格中嵌入表单元素

绑定数据：

table ：

:data="planFormData.allocationPlan"

el-form-item:

v-model="scope.row.shouldDisburseTotal"

表单验证规则：

el-form-item:

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

v-for循环生成表单元素

:prop写法如下

:prop="`methods[${i}].reduceScore`":rules="standardRules.reduceScore"label-width="0"style="display: inline-block; width: 150px"

>

v-model="v.reduceScore"style="width: 64px"

>

写法如下

1.data字段

planFormData: {

allocationTime:"",

allocationPlan: [],//拨付计划周期

},

2.页面元素

:data="planFormData.allocationPlan"id="allocationPlan"max-height="350px"border

v-loading="isLoading"style="width:960px;font-size:14px;color:#333333;margin-top:10px"

>

slot-scope="scope"

>{{scope.row.startDate}} 至 {{planFormData.allocationTime?scope.row.endDate:'(请选择拨付时间)'}}

v-if="scope.$index

>

v-model="scope.row.shouldDisburseTotal"@blur="checkLastCost"style="width:240px"class="table-input"

>

 元

注意点： 生成表格数据时，导致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));