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=" ...
随机推荐
- python接口自动化测试(三)-requests.post()
上一节介绍了 requests.get() 方法的基本使用,本节介绍 requests.post() 方法的使用: 本文目录: 一.方法定义 二.post方法简单使用 1.带数据的post 2 ...
- 干货!最全羽毛球技术动态分解gif图
羽毛球的技术千变万化,但是离不开最基本的击球方法.下面通过一组形象的动态图,给你展现羽毛球的基本动作.大家,务必要收藏起来,慢慢体会哦! 一.发球 二.前场技术 1.网前球 2.搓球 3.勾球 4.推 ...
- 开发app前需要提前准备的资料
需要准备的资料整理如下: 1 域名未注册,建议在 阿里云注册:https://www.aliyun.com/,2 服务器https://ecs-buy.aliyun.com/配置:计费方式:包年包月地 ...
- Saltstack之Scheduler
一.引言: 在日常的运维工作中经常会遇到需要定时定点启动任务,首先会考虑到crontab,但是通过crontab的话需要每台机器下进行设置,这样统一管理的话比较复杂:通过查百度和google发现sal ...
- Apache-配置、测试和调试
首先执行下面的指令列出有用的Apache配置信息 grep -v '#' /usr/local/apache2/etc/httpd.conf |grep -v '^$' ServerRoot &quo ...
- Linux内核同步
Linux内核剖析 之 内核同步 主要内容 1.内核请求何时以交错(interleave)的方式执行以及交错程度如何. 2.内核所实现的基本同步机制. 3.通常情况下如何使用内核提供的同步机制. 内核 ...
- CentOS 7.4上网速度慢,修改DNS!
修改下DNS,vi /etc/resolv.conf 原来配置: nameserver 223.5.5.5 修改为: nameserver 114.114.114.114
- 【Vegas原创】MAC下,idea手动maven jar包的方法
1,到自己的项目目录下 Vegass-MacBook-Air:gms-boyol Vegas$ pwd/Users/Vegas/SynologyDrive/Coding/workspace/gms-b ...
- [Memcached]分布式缓存系统Memcached在Asp.net下的应用
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...
- EditText小记
今天在编写样式的时候,需要设置数据输入为单行,但是 Android:singleLine=”true” 显示为已过期,提示使用 android:maxLines=“1” 代替,但是设置后却发现并没有效 ...