iview form 表單的怪異小BUG

本文轉載自查看原文 2019-01-11 18:17 983 vue/ js功能

當同一個彈窗中的表單重復利用時：

我原先的代碼邏輯是：

 1 <Form :label-width="100" class="mt20" ref="changeParam" :rules="ruleValidate"  :model="changeParam">
 2             <Row>
 3               <Col span="22">
 4                 <FormItem label="課程">
 5                   <Input v-model="info.f_lesson_name" disabled style="width:200px;"></Input>
 6                 </FormItem>
 7               </Col>
 8             </Row>
 9             <Row v-if="info.teacher_id > 0">
10               <Col span="22" class='pr'>
11                 <FormItem label="原授課老師">
12                   <Input v-model="info.f_teacher_id" disabled  style="width: 200px"></Input>
13                 </FormItem>
14               </Col>
15             </Row>
16             <Row>
17               <Col span="22" class='pr'>
18                 <FormItem v-if="info.teacher_id > 0" label="新授課老師" prop="teacher_id">
19                   <i class="clearSelect" v-if="changeParam.teacher_id"  @click="clearSelect">X</i>
20                   <Select
21                     style="width: 200px"
22                     v-model="changeParam.teacher_id"
23                     :disabled="changeParam.teacher_id ? true: false"
24                     placeholder="請搜索后選擇老師"
25                     filterable
26                     remote
27                     :remote-method="searchTeacher">
28                     <Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
29                   </Select>
30                 </FormItem>
31                 <FormItem v-else label="授課老師" prop="teacher_id">
32                   <i class="clearSelect" v-if="changeParam.teacher_id"  @click="clearSelect">X</i>
33                   <Select
34                     style="width: 200px"
35                     v-model="changeParam.teacher_id"
36                     :disabled="changeParam.teacher_id ? true: false"
37                     placeholder="請搜索后選擇老師"
38                     filterable
39                     remote
40                     :remote-method="searchTeacher">
41                     <Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
42                   </Select>
43                 </FormItem>
44               </Col>
45             </Row>
46             <Row>
47               <Col span="22" class='pr' v-if="info.teacher_id > 0">
48                 <FormItem label="理由" prop="reason_service" style="font-size: 14px;">
49                   <Select v-model="changeParam.reason_service" style="width:200px;">
50                     <Option v-for='(item,key) in reason_service' :value="key" :key='key'>{{item}}</Option>
51                   </Select>
52                 </FormItem>
53               </Col>
54             </Row>
55             <Row v-if='changeParam.reason_service == 99'>
56               <Col span="22" class='pa'>
57                 <FormItem label="備注" prop="remark">
58                   <template>
59                     <Input type="textarea" v-model="changeParam.remark" :autosize="{minRows: 2,maxRows: 5}"
60                            placeholder="備注" style="width:300px;"></Input>
61                   </template>
62                 </FormItem>
63               </Col>
64             </Row>
65           </Form>

更改后：

 1 <Form :label-width="100" class="mt20" ref="changeParam" :rules="ruleValidate"  :model="changeParam">
 2             <Row>
 3               <Col span="22">
 4                 <FormItem label="課程">
 5                   <Input v-model="info.f_lesson_name" disabled style="width:200px;"></Input>
 6                 </FormItem>
 7               </Col>
 8             </Row>
 9             <Row v-if="info.teacher_id > 0">
10               <Col span="22" class='pr'>
11                 <FormItem label="原授課老師">
12                   <Input v-model="info.f_teacher_id" disabled  style="width: 200px"></Input>
13                 </FormItem>
14               </Col>
15             </Row>
16             <Row>
17               <Col span="22" class='pr'>
18                 <FormItem v-if="info.teacher_id > 0" label="新授課老師" prop="teacher_id">
19                   <i class="clearSelect" v-if="changeParam.teacher_id"  @click="clearSelect">X</i>
20                   <Select
21                     style="width: 200px"
22                     v-model="changeParam.teacher_id"
23                     :disabled="changeParam.teacher_id ? true: false"
24                     placeholder="請搜索后選擇老師"
25                     filterable
26                     remote
27                     :remote-method="searchTeacher">
28                     <Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
29                   </Select>
30                 </FormItem>
31                 <FormItem v-else label="授課老師" prop="teacher_id">
32                   <i class="clearSelect" v-if="changeParam.teacher_id"  @click="clearSelect">X</i>
33                   <Select
34                     style="width: 200px"
35                     v-model="changeParam.teacher_id"
36                     :disabled="changeParam.teacher_id ? true: false"
37                     placeholder="請搜索后選擇老師"
38                     filterable
39                     remote
40                     :remote-method="searchTeacher">
41                     <Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
42                   </Select>
43                 </FormItem>
44               </Col>
45             </Row>
46             <Row>
47               <Col span="22" class='pr' v-if="info.teacher_id > 0">
48                 <FormItem label="理由" prop="reason_service" style="font-size: 14px;">
49                   <Select v-model="changeParam.reason_service" style="width:200px;">
50                     <Option v-for='(item,key) in reason_service' :value="key" :key='key'>{{item}}</Option>
51                   </Select>
52                 </FormItem>
53               </Col>
54             </Row>
55             <Row >
56               <!--錯誤的地方-->
57               <Col span="22" class='pa' v-if='changeParam.reason_service == 99'>
58                 <FormItem label="備注" prop="remark">
59                   <template>
60                     <Input type="textarea" v-model="changeParam.remark" :autosize="{minRows: 2,maxRows: 5}"
61                            placeholder="備注" style="width:300px;"></Input>
62                   </template>
63                 </FormItem>
64               </Col>
65             </Row>
66           </Form>

具體原因我目前不清楚，但確實是把判斷寫在row中了，當更改后，就可以了；讓自己下次注意。並且找時間找到為啥

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Iview-form表單的重置 iview form表單校驗出錯 iView Form表單與DatePicker日期選擇器小程序筆記四：表單提交form iview select下拉bug iView框架Form表單驗證失效（驗證狀態無法及時更新）關於iview表單驗證的問題關於iView中表單的基本使用 iview中表單重置無效 form表單屬性及表單分組