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=" ...
随机推荐
- Centos 7.x nginx隐藏版本号
一.打开配置文件 #vim /etc/nginx/nginx.conf 二.增加一行: server_tokens off; 三.重启nginx #nginx -s reload 四.效果
- AspectF写法
AspectF.Define .ProgressBar(caption) .Do(() => { if (!SpecialMenuClick(midForm, tag)) { DockBarSh ...
- Python 简单入门指北(一)
Python 简单入门指北(一) Python 是一门非常容易上手的语言,通过查阅资料和教程,也许一晚上就能写出一个简单的爬虫.但 Python 也是一门很难精通的语言,因为简洁的语法背后隐藏了许多黑 ...
- sqoop 测试 --hive-delims-replacement 参数
在hive的官方文档中给的例子中字段分隔符是\001,但是在他的API文档中--hive-delims-replacement ,--hive-drop-import-delims 参数中会处理的 ...
- C语言 结构体中的零长度数组
/* C语言零长度数组大小和取值问题 */ #include <stdio.h> #include <stdlib.h> #include <string.h> s ...
- Sword libcurl回调函数相关知识
libcurl响应回调函数说明 libcurl在默认情况下,回调里面会将数据分段的返回,不会一下子将发送端的数据全部塞到回调函数里面, 经过源码分析回调函数和curl_easy_perform是在 ...
- 01Hadoop二次排序
我的目的: 示例: 2012,01,01,352011,12,23,-42012,01,01,432012,01,01,232011,12,23,52011,4,1,22011,4,1,56 结果: ...
- 加速Windows 2003关机速度的设置方法
indows 2003是目前版本最高的Windows操作系统,虽然其功能比历史上任何一个版都要强,但是其关机操作却给大家带来了一些小麻烦.其实我们完全可以解除这些麻烦,让关机加速 一.关闭关机事件 ...
- Spring-Cloud-Config学习笔记(一):使用本地存储
简介 Spring Cloud Config为分布式系统中的外部配置提供服务器和客户端支持.使用Config Server,您可以为所有环境中的应用程序管理其外部属性.它非常适合spring应用,也可 ...
- 解决webdiyer:AspNetPager分页控件在IE模式下点击页号不能翻页的问题。
在网站根目录下新建ie.browser文件, 然后用记事本打开. 将以下代码粘贴进去,保存即可,目的是让其与IE11的 UserAgent 匹配,使 .net framework 认识这是一个已知的浏 ...