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=" ...
随机推荐
- 【PMP】商业论证与效益管理文件
①项目商业论证 定义:文档化的经济可行性研究报告,用来对尚缺乏充分定义的所选方案的收益进行有效性论证,是启动后续项目管理活动的依据. 项目发起人通常负责商业论证文件的制定和维护,项目经理负责提供建议和 ...
- 关联规则挖掘算法之Apriori算法
Apriori算法是一种挖掘关联规则的频繁项集算法,其核心思想是通过候选集生成和情节的向下封闭检测两个阶段来挖掘频繁项集. 关于这个算法有一个非常有名的故事:"尿布和啤酒".故事是 ...
- 【C++】C++中的引用与指针
想必大家对C++中的指针都有所了解,但是什么是引用呢?C++11标准引入了“引用”的新功能. 引用 引用(reference):给对象起了另外一个名字,引用类型引用(refers to)另外一种类型, ...
- linux内核剖析(九)进程间通信之-信号signal
信号及信号来源 什么是信号 信号是UNIX和Linux系统响应某些条件而产生的一个事件,接收到该信号的进程会相应地采取一些行动.通常信号是由一个错误产生的.但它们还可以作为进程间通信或修改行为的一种方 ...
- Navicat Premium 12破解方法
来源网址:https://www.jianshu.com/p/42a33b0dda9c 1.按步骤安装Navicat Premium,如果没有可以去官网下载:http://www.navicat.co ...
- Atitit orm的实现模式 data-mapper模式和active-record模式有什么区别
Atitit orm的实现模式 data-mapper模式和active-record模式有什么区别 1.1. 这是来自Node.js路线有关混合两种ORM模式Active Record(活动记录模 ...
- Git忽略规则.gitignore忽略node_modules文件夹
在项目文件夹里添加.gitignore的文件 打开文件,在里面添加 /node_modules
- fiddler抓包url有乱码
fiddler抓包url有乱码: 解决具体步骤: 注册表:regedit HKEY_CURRENT_USER\Software\Microsoft\Fiddler2 1.打开注册表,regedit ...
- SAP FICO 凭证导入接口 数据xml格式
接口传入参数说明 <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xm ...
- 关于FastJSON
https://github.com/alibaba/fastjson/wiki/Quick-Start-CN FastJSON常见问题 FastJson和get方法的问题 使用SimplePrope ...