項(xiàng)目場(chǎng)景：

項(xiàng)目需求：在表格中實(shí)現(xiàn)動(dòng)態(tài)加減數(shù)據(jù)，并且每行表格內(nèi)的輸入框，都要?jiǎng)討B(tài)校驗(yàn)數(shù)據(jù)，校驗(yàn)不通過(guò)，不讓提交數(shù)據(jù)，并且由于表格內(nèi)部空間較小，我僅保留紅邊框提示，文字提示給隱藏了，不然表格內(nèi)的框會(huì)很大很難看。

如果，你需要提示的話，不要show-message屬性

            <Form ref="formDynamic":model="obj":label-width="15":show-message="false" //去掉這一行代碼就顯示校驗(yàn)錯(cuò)誤信息了inline>

---

問(wèn)題描述

提示：在表格中實(shí)現(xiàn)動(dòng)態(tài)加減數(shù)據(jù)，并且每行表格內(nèi)的輸入框，都要?jiǎng)討B(tài)校驗(yàn)數(shù)據(jù)

原因分析：

提示：這里我并沒(méi)有用viewUI的table組件，用的是原生html做的表格，然后樣式做成和table組件相似，我不用table組件，是因?yàn)榻M件限制太多，組件用v-for渲染表格達(dá)不到項(xiàng)目需求，并且內(nèi)部prop也檢測(cè)不到校驗(yàn)。

這邊的代碼是精簡(jiǎn)的，里面核心的代碼就在這，如果不是很明白的話，下面有全部代碼

           <Form ref="formDynamic":model="obj":label-width="15":show-message="false"inline><table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;"><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)費(fèi)用</th><tr v-for="(item, index) in obj.modelData":key="index"style="border:  1px solid #e8eaec"><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceFee'":rules="[{required: true, type:'number', message: '請(qǐng)輸入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '請(qǐng)輸入正數(shù)'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceFee":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"></Input></FormItem></td></tr></table></Form>

---

解決方案：

提示：全部代碼：

  <template><Form ref="formDynamic":model="obj":label-width="15":show-message="false"inline><table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;"><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)編號(hào)</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)費(fèi)用</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)類(lèi)型</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)應(yīng)收</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保險(xiǎn)實(shí)收</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保單欠款</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收費(fèi)開(kāi)始時(shí)間</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收費(fèi)截止時(shí)間</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">備注</th><th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">操作</th><tr v-for="(item, index) in obj.modelData":key="index"style="border:  1px solid #e8eaec"><!--                  保險(xiǎn)編號(hào)--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceId'"style="width: 120px":rules="{required: true, message: '請(qǐng)輸入', trigger: 'change'}"><Selectv-if="!Boolean(flag)"transferv-model="obj.modelData[index].insuranceId"@on-change="changeBd(item,index)"><Optionv-for="item in policyData":value="item.id":key="item.id">{{ item.insuranceCode }}</Option></Select><Input v-else :disabled='Boolean(flag)' v-model="obj.modelData[index].insuranceCode"></Input></FormItem></td><!--                  保險(xiǎn)費(fèi)用--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceFee'":rules="[{required: true, type:'number', message: '請(qǐng)輸入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '請(qǐng)輸入正數(shù)'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceFee":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"></Input></FormItem></td><!--                  保險(xiǎn)類(lèi)型--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceType'":rules="{required: true, message: '請(qǐng)輸入'}"><Input type="text" disabled v-model="item.insuranceType" placeholder="請(qǐng)輸入..."></Input></FormItem></td><!--                  保險(xiǎn)應(yīng)收--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceReceivables'":rules="[{required: true, type:'number',  message: '請(qǐng)輸入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '請(qǐng)輸入正數(shù)'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceReceivables"@on-change="calculateCost(item,index)":show-word-limit='true':maxlength="10":disabled="Boolean(flag)"@input="e => handleInput(e,'insuranceReceivables')"></Input></FormItem></td><!--                  保險(xiǎn)實(shí)收--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insurancePaid'":rules="[{required: true, type:'number',  message: '請(qǐng)輸入', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '請(qǐng)輸入正數(shù)'}]"><Inputv-model.trim.number="obj.modelData[index].insurancePaid"@on-change="calculateCost(item,index)":show-word-limit='true':maxlength="10"></Input></FormItem></td><!--                  保險(xiǎn)欠款--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.insuranceDebt'":rules="[{required: true, validator: '',  message: '請(qǐng)輸入',type:'number', trigger: 'blur'},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '請(qǐng)輸入正數(shù)'}]"><Inputv-model.trim.number="obj.modelData[index].insuranceDebt"disabled=""></Input></FormItem></td><!--                  收費(fèi)開(kāi)始時(shí)間--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.startTime'":rules="{required: true, message: '請(qǐng)輸入'}"><DatePicker type="date"transferformat="yyyy-MM-dd"@on-change="obj.modelData[index].startTime = $event, setOptions($event,item,index,'start')"placeholder="開(kāi)始時(shí)間"v-model="obj.modelData[index].startTime":disabled="Boolean(flag)"><!--                    @on-change="modelData[index].startTime = $event"--></DatePicker></FormItem></td><!--                  收費(fèi)截止時(shí)間--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel=" ":prop="'modelData.'+index+'.endTime'":rules="{required: true, message: '請(qǐng)輸入'}"><DatePicker type="date"transferformat="yyyy-MM-dd":options='timeOptions[timeIndex]'placeholder="截止時(shí)間"@on-change="obj.modelData[index].endTime = $event"@on-open-change="setOptions($event,item,index, 'end')"v-model="obj.modelData[index].endTime":disabled="Boolean(flag)"></DatePicker></FormItem></td><!--                  備注--><td style="border:  1px solid #e8eaec;padding: 7px"><FormItemlabel="":label-width="0":prop="'modelData.'+index+'.remark'"><Inputv-model="obj.modelData[index].remark":show-word-limit='true':maxlength="100":disabled="Boolean(flag)"></Input></FormItem></td><!--                  操作--><td style="border:  1px solid #e8eaec;padding: 0px 7px 0px 7px;width: 180px;text-align: center"><Button type="primary" style="" @click="cuteFTP(row,index)"v-permission="'alliance:business:record:insurance:upload'">上傳</Button><Poptipv-if="!flag"confirm:transfer="true"title="你確定刪除嗎？"@on-ok="delInsurance(index)"><Button type="error"><Icon type="md-trash"/>刪除</Button></Poptip></td></tr></table></Form></template>