iview form 表单的怪异小BUG
当同一个弹窗中的表单重复利用时:
我原先的代码逻辑是:
<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的更多相关文章
- django Form 表单 总结与小实例
开头寄语: 这几天一直在看Django的form表单验证,然后想对于这几天要有个总结. 首先,先来看一下找到的一个form表单验证的流程: 验证过程 流程详解1. 函数full_clean()依次调用 ...
- iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- 用jquery写自己的form表单验证
这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- 微信小程序 PHP后端form表单提交实例详解
微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
随机推荐
- Darwin Streaming Server服务器mp4文件点播返回”415 Unsupported Media Type“错误
Darwin Streaming Server中mp4文件点播失败,通过抓包发现服务器返回”415 Unsupported Media Type“错误,如下: RTSP/ Unsupported Me ...
- 【Android自己定义控件】圆圈交替,仿progress效果
还是我们自定View的那几个步骤: 1.自己定义View的属性 2.在View的构造方法中获得我们自己定义的属性 3.重写onMesure (不是必须) 4.重写onDraw 自己定义View的属性 ...
- golang协程池设计
Why Pool go自从出生就身带“高并发”的标签,其并发编程就是由groutine实现的,因其消耗资源低,性能高效,开发成本低的特性而被广泛应用到各种场景,例如服务端开发中使用的HTTP服务,在g ...
- Thymeleaf模版--子页面单独引入CSS、JS文件
https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...
- 解决Warning Couldn't flush user prefs: java.util.prefs.BackingStoreException: Couldn't get file lock.
系统:Ubuntu 16.04 LTS 环境:vscode+java extension pack打开了一个gradle的java项目:另外,用一个terminal启动了groovysh 报错: gr ...
- C# Task中的Func, Action, Async与Await的使用
在说Asnc和Await之前,先说明一下Func和Action委托, Task任务的基础的用法 1. Func Func是一种委托,这是在3.5里面新增的,2.0里面我们使用委托是用Delegate, ...
- Js 跳出两级循环的方法
做过一个复杂的验证方法,需要两层each验证之后反正报错的信息.因为双重循环的问题,纠结了很久. /** * 验证input 的值 是否输入 flg:验证成功 false:验证失败 */ functi ...
- 如何设计一款优秀的短视频 SDK
2017 年,短视频成为了创业的新风口,各种短视频 App 如雨后春笋般先后上线,视频越来越像文字.图片一样,成为每一个 App 不可或缺的一部分. 1. 包体一定要尽可能小 如何做到尽可能的减小 S ...
- 微信小程序,图片居中显示,适配不同机型
<view style='width:100%;height:100%;text-align:center;' class="picture-2"> <ima ...
- Android中使用BufferedReader.readline阻塞读取不到数据,但是ready返回true
通过socket测试工具在电脑上发送消息,Android真机可以收到响应BufferedReader.ready()返回true,但是readline却一直阻塞. 原因:readline()只有在遇到 ...