Project scenario:
Project requirements: Realize dynamic addition and subtraction of data in the form, and the input box in each row of the form must dynamically verify the data. If the verification fails, the data is not allowed to be submitted, and because the internal space of the form is small, I only keep the red The border prompt and text prompt are hidden, otherwise the frame in the table will be very large and ugly.
If you need prompts, don’t use the show-message attribute
<Form ref="formDynamic"
:model="obj"
:label-width="15"
:show-message="false" //Remove this line of code to display the verification error message
inline
>
Description of the problem
Tip: Realize dynamic addition and subtraction of data in the table, and the input box in each row of the table must dynamically verify the data
Cause Analysis:
Tip: I didn’t use the table component of viewUI here, but a table made of native html, and the style was made similar to the table component. I don’t use the table component because the component has too many restrictions. The component uses
v-forThe rendering table does not meet the project requirements, and the internalpropcannot detect the validation.
The code here is condensed, the core code is here, if you don’t understand it, all the code is below
<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">Insurance fee</th>
<tr v-for="(item, index) in obj.modelData"
:key="index"
style="border: 1px solid #e8eaec"
>
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceFee'"
:rules="[{<!-- -->required: true, type:'number', message: 'Please enter', trigger: 'blur'},
{<!-- -->pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 'Please enter a positive number'} ]"
>
<Input
v-model.trim.number="obj.modelData[index].insuranceFee"
:show-word-limit='true'
:maxlength="10"
:disabled="Boolean(flag)"
></Input>
</FormItem>
</td>
</tr>
</table>
</Form>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack.png" alt ="" title="">
Solution:
Hint: Full code:
<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">Insurance Number</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Insurance fee</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Insurance type</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Insurance Receivable</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Insurance received</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Policy arrears</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Charge start time</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Billing deadline</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Remarks</th>
<th style="border: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">Operation</th>
<tr v-for="(item, index) in obj.modelData"
:key="index"
style="border: 1px solid #e8eaec"
>
<!-- Insurance Number-->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceId'"
style="width: 120px"
:rules="{required: true, message: 'Please enter', trigger: 'change'}">
<Select
v-if="!Boolean(flag)"
transfer
v-model="obj.modelData[index].insuranceId"
@on-change="changeBd(item,index)"
>
<Option
v-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>
<!-- Insurance Fee-->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceFee'"
:rules="[{<!-- -->required: true, type:'number', message: 'Please enter', trigger: 'blur'},
{<!-- -->pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 'Please enter a positive number'} ]"
>
<Input
v-model.trim.number="obj.modelData[index].insuranceFee"
:show-word-limit='true'
:maxlength="10"
:disabled="Boolean(flag)"
></Input>
</FormItem>
</td>
<!-- Insurance Type -->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceType'"
:rules="{required: true, message: 'Please enter'}">
<Input type="text" disabled v-model="item.insuranceType" placeholder="Please enter..."></Input>
</FormItem>
</td>
<!-- Insurance Receivables -->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceReceivables'"
:rules="[{<!-- -->required: true, type:'number', message: 'Please enter', trigger: 'blur'},
{<!-- -->pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 'Please enter a positive number'} ]"
>
<Input
v-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>
<!-- Insurance paid-->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insurancePaid'"
:rules="[{<!-- -->required: true, type:'number', message: 'Please enter', trigger: 'blur'},
{<!-- -->pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 'Please enter a positive number'} ]"
>
<Input
v-model.trim.number="obj.modelData[index].insurancePaid"
@on-change="calculateCost(item,index)"
:show-word-limit='true'
:maxlength="10"
></Input>
</FormItem>
</td>
<!-- Insurance arrears -->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.insuranceDebt'"
:rules="[{<!-- -->required: true, validator: '', message: 'Please enter',type:'number', trigger: 'blur'},
{<!-- -->pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 'Please enter a positive number'} ]"
>
<Input
v-model.trim.number="obj.modelData[index].insuranceDebt"
disabled=""
></Input>
</FormItem>
</td>
<!-- Charging start time -->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.startTime'"
:rules="{required: true, message: 'Please enter'}">
<DatePicker type="date"
transfer
format="yyyy-MM-dd"
@on-change="obj.modelData[index].startTime = $event, setOptions($event,item,index,'start')"
placeholder="start time"
v-model="obj.modelData[index].startTime"
:disabled="Boolean(flag)"
>
<!-- @on-change="modelData[index].startTime = $event"-->
</DatePicker>
</FormItem>
</td>
<!-- Fee Deadline-->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:prop="'modelData.' + index + '.endTime'"
:rules="{required: true, message: 'Please enter'}">
<DatePicker type="date"
transfer
format="yyyy-MM-dd"
:options='timeOptions[timeIndex]'
placeholder="deadline"
@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>
<!-- Remarks-->
<td style="border: 1px solid #e8eaec;padding: 7px">
<FormItem
label=""
:label-width="0"
:prop="'modelData.' + index + '.remark'"
>
<Input
v-model="obj.modelData[index].remark"
:show-word-limit='true'
:maxlength="100"
:disabled="Boolean(flag)"
></Input>
</FormItem>
</td>
<!-- Operation -->
<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'"
>upload
</Button>
<Poptip
v-if="!flag"
confirm
:transfer="true"
title="Are you sure to delete?"
@on-ok="delInsurance(index)"
>
<Button type="error">
<Icon type="md-trash"/>
delete
</Button>
</Poptip>
</td>
</tr>
</table>
</Form>
</template>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack.png" alt ="" title="">