iview form 表单的怪异小BUG
Posted mxyr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iview form 表单的怪异小BUG相关的知识，希望对你有一定的参考价值。
当同一个弹窗中的表单重复利用时：
我原先的代码逻辑是：
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中了，当更改后，就可以了；让自己下次注意。并且找时间找到为啥
以上是关于iview form 表单的怪异小BUG的主要内容，如果未能解决你的问题，请参考以下文章