当同一个弹窗中的表单重复利用时:

我原先的代码逻辑是:

 <Form :label-width="100" class="mt20" ref="changeParam" :rules="ruleValidate"  :model="changeParam">
<Row>
<Col span="22">
<FormItem label="课程">
<Input v-model="info.f_lesson_name" disabled style="width:200px;"></Input>
</FormItem>
</Col>
</Row>
<Row v-if="info.teacher_id > 0">
<Col span="22" class='pr'>
<FormItem label="原授课老师">
<Input v-model="info.f_teacher_id" disabled style="width: 200px"></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="22" class='pr'>
<FormItem v-if="info.teacher_id > 0" label="新授课老师" prop="teacher_id">
<i class="clearSelect" v-if="changeParam.teacher_id" @click="clearSelect">X</i>
<Select
style="width: 200px"
v-model="changeParam.teacher_id"
:disabled="changeParam.teacher_id ? true: false"
placeholder="请搜索后选择老师"
filterable
remote
:remote-method="searchTeacher">
<Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
</Select>
</FormItem>
<FormItem v-else label="授课老师" prop="teacher_id">
<i class="clearSelect" v-if="changeParam.teacher_id" @click="clearSelect">X</i>
<Select
style="width: 200px"
v-model="changeParam.teacher_id"
:disabled="changeParam.teacher_id ? true: false"
placeholder="请搜索后选择老师"
filterable
remote
:remote-method="searchTeacher">
<Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="22" class='pr' v-if="info.teacher_id > 0">
<FormItem label="理由" prop="reason_service" style="font-size: 14px;">
<Select v-model="changeParam.reason_service" style="width:200px;">
<Option v-for='(item,key) in reason_service' :value="key" :key='key'>{{item}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row v-if='changeParam.reason_service == 99'>
<Col span="22" class='pa'>
<FormItem label="备注" prop="remark">
<template>
<Input type="textarea" v-model="changeParam.remark" :autosize="{minRows: 2,maxRows: 5}"
placeholder="备注" style="width:300px;"></Input>
</template>
</FormItem>
</Col>
</Row>
</Form>

更改后:

 <Form :label-width="100" class="mt20" ref="changeParam" :rules="ruleValidate"  :model="changeParam">
<Row>
<Col span="22">
<FormItem label="课程">
<Input v-model="info.f_lesson_name" disabled style="width:200px;"></Input>
</FormItem>
</Col>
</Row>
<Row v-if="info.teacher_id > 0">
<Col span="22" class='pr'>
<FormItem label="原授课老师">
<Input v-model="info.f_teacher_id" disabled style="width: 200px"></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="22" class='pr'>
<FormItem v-if="info.teacher_id > 0" label="新授课老师" prop="teacher_id">
<i class="clearSelect" v-if="changeParam.teacher_id" @click="clearSelect">X</i>
<Select
style="width: 200px"
v-model="changeParam.teacher_id"
:disabled="changeParam.teacher_id ? true: false"
placeholder="请搜索后选择老师"
filterable
remote
:remote-method="searchTeacher">
<Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
</Select>
</FormItem>
<FormItem v-else label="授课老师" prop="teacher_id">
<i class="clearSelect" v-if="changeParam.teacher_id" @click="clearSelect">X</i>
<Select
style="width: 200px"
v-model="changeParam.teacher_id"
:disabled="changeParam.teacher_id ? true: false"
placeholder="请搜索后选择老师"
filterable
remote
:remote-method="searchTeacher">
<Option v-for="(item,key) in teacherList" :value="item.userid" :key="key"> {{item.f_campus ? item.f_campus: item.f_city }}-{{item.realname}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="22" class='pr' v-if="info.teacher_id > 0">
<FormItem label="理由" prop="reason_service" style="font-size: 14px;">
<Select v-model="changeParam.reason_service" style="width:200px;">
<Option v-for='(item,key) in reason_service' :value="key" :key='key'>{{item}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row >
<!--错误的地方-->
<Col span="22" class='pa' v-if='changeParam.reason_service == 99'>
<FormItem label="备注" prop="remark">
<template>
<Input type="textarea" v-model="changeParam.remark" :autosize="{minRows: 2,maxRows: 5}"
placeholder="备注" style="width:300px;"></Input>
</template>
</FormItem>
</Col>
</Row>
</Form>

具体原因我目前不清楚,但确实是把判断写在row中了,当更改后,就可以了;让自己下次注意。并且找时间找到为啥

iview form 表单的怪异小BUG的更多相关文章

  1. django Form 表单 总结与小实例

    开头寄语: 这几天一直在看Django的form表单验证,然后想对于这几天要有个总结. 首先,先来看一下找到的一个form表单验证的流程: 验证过程 流程详解1. 函数full_clean()依次调用 ...

  2. iview form表单数值类型校验「iview自定义form表单校验器」

    摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...

  3. form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  4. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  5. 用jquery写自己的form表单验证

    这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...

  6. 天河微信小程序入门《四》:融会贯通,form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

  7. 微信小程序 PHP后端form表单提交实例详解

    微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...

  8. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  9. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

随机推荐

  1. iOS/MAC 数据压缩与解压缩及常用算法 LZMA、ZLIB

    苹果提供的常用的数据压缩算法LZMA.ZLIB.LZ4等: 这三种算法也是苹果建议的,可跨平台使用: 定义如下: /* Commonly-available encoders */ COMPRESSI ...

  2. service_names配置不正确,导致dg创建失败

    service_names配置不正确,导致dg创建失败 伙伴发来消息,创建dg后,主备一直无法进行日志同步. 以下是查看过程 备库的alert日志: 2018-11-13T17:47:36.23129 ...

  3. 为啥百度、网易、小米都用Python?Python的用途是什么?

      Python是一门脚本语言.由于能将其他各种编程语言写的模块粘接在一起,也被称作胶水语言.强大的包容性.强悍的功能和应用的广泛性使其受到越来越多的关注,想起一句老话:你若盛开.蝴蝶自来. 假设你感 ...

  4. 【翻译】Apache Shiro10分钟教程

    本文为翻译文,原文地址:http://shiro.apache.org/10-minute-tutorial.html 介绍 欢迎来到Apache Shiro的10分钟教程! 通过这个教程,你会明白一 ...

  5. Asp.Net \uxxx Unicode编码解码

    /// <summary> /// Unicode编码 /// </summary> /// <param name="str"></pa ...

  6. mysql主从复制-方案2

    MySQL主从介绍 (两台机器数据同步) 主:-->binlog 从:-->relaylog 主上有一个log dump线程,用来和从的I/O线程传递binlog 从上有两个线程,其中I/ ...

  7. Dubbo,Zookeeper入门

    Zookeeper 功能:分布式应用程序协调服务,集群管理者,监视集群各个节点状态-->提交反馈-->进行下一步合理操作: 机制:目录方式,当目录节点发生变化(数据改变,被删除,子节点增加 ...

  8. LeetCode 51 N-Queens II

    Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...

  9. 4依赖倒转原则DIP

    一.什么是倒转? 传统的过程式设计倾向于使高层次的模块依赖于低层次的模块,抽象层依赖 于具体的层次. 二.什么是依赖倒转原则 依赖倒转(Dependence Inversion Principle ) ...

  10. TIJ -- 吐司BlockingQueue

    1. 吐司BlockingQueue 考虑下面这个使用BlockingQueue的示例.有一台机器具有三个任务:一个制作吐司,一个给吐司抹黄油,另一个在抹过黄油的吐司上吐果酱.我们可以通过各个处理过程 ...