前台-表单切换-使用同一个form表单

最新推荐文章于 2024-04-03 15:26:40 发布
最新推荐文章于 2024-04-03 15:26:40 发布
阅读量279 收藏 1
点赞数
分类专栏： key门户项目 文章标签： ui servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hktkkkk/article/details/128965442
版权
本文介绍如何在前端使用Element UI的el-tabs组件结合v-if或el-radio-group与v-show，实现同一个form表单内容的切换显示，有效管理表单元素的显示与隐藏状态。
摘要由CSDN通过智能技术生成

1.使用el-tabs与v-if切换

 

    <el-form ref="ruleFormRef" class="demo-form-inline" :model="ruleForm" :rules="rules" :size="formSize" status-icon>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="帐号密码登录" name="password_code">
					<div v-if="activeName == 'password_code'">
						<el-form-item prop="username"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
codingFunTime
关注
专栏目录
订阅专栏
Selenium：表单切换
不怕猫的耗子A
03-04 1999
表单 1、就是网页标签名为frame或iframe的元素，表单引用了其他页面的链接，真正的页面数据没有出现在源码中，但是在浏览器中可以看见，与浏览器的多个窗口类似 ⑴这里说的表单不是HTML中的form标签，而是frame或iframe标签 ⑵frame、iframe标签为HTML页面中的一种表单框架，主要作用是在当前页面中指定区域显示另一页面元素 2、frame或iframe标签表示在当前页面中镶嵌了另一个页面(以URL链接方式引用的)。因此就相当于是两个页面显示在了同一个窗口中 ...
tab选项卡切换不同form表单时，validate红色样式还存在
张小薇爱学习
04-10 484
当选项radio值改变时，视图变化了，但是rules校验表单的红色边框和文字依然存在（虽然通过v-if控制表单显示）1.给el-form加不同的key。2.给form嵌套div父级。
多个el-tab共用一个表单校验问题
程序媛的博客
03-14 1274
表单校验问题，同一个表单，不同情况下，加入必填校验和去除必填校验。
jQuery切换表单
52CRACKING
02-29 216
jQuery Switch the form html <php>$JSARR[]=$TEMPLATE_PATH."js/jquery-1.9.1.min.js"</php> <php>$JSARR[]=$TEMPLATE_PATH."js/login.js...
一个表单form、submit提交到多个不同页面
BrightLee的专栏
10-12 2467
http://www.360doc.com/content/07/1119/14/39865_831334.shtml<br /><br /> 在做管理页面的时候常常遇到这样的情况：全选所有列表，然后进行多个操作（删除、转移等），这样每条记录做一个表单比较麻烦，HTML代码太多而且操作复杂。通常会遇到了一个表单提交到不同的处理页面，比如执行删除的delete.asp<br /> 或者move.asp<br /> 。上网找了下资料，大多数方法都是通过Javascipt来实现了以上的功能，代码如下。</p
el-tabs嵌套el-form碰到的问题
qq_34179819的博客
08-03 804
当然，对于切换标签，可能会出现校验的红字还在，并没有清空的情况，这是因为使用的Form组件是同一dom，想要清空的校验的话，最简单的方法就是加一个key属性，:key=“key”，tabChange改变了key之后，编译器就会重新渲染Form组件，这样就达到了清空校验的目的！在el-tabs内使用el-form时，会出现标签第一个内的el-form在点击保存按钮后，无法进行全部校验。对于这个问题，目前也没找到原因以及一个好的解决办法，好在通过将tabs内的内容移到外部来，解决了这一问题。
【vue】Vue+Element Form 表单v-if动态切换el-form-item标签prop属性不生效问题：
最新发布
Bole6666666的博客
04-03 632
在确保 el-form 标签 :model="form" :rules="rules" 属性及绑定值没问题的情况，给需要动态切换的 el-form-item 标签上 加上。)，这样prop即可生效。
图书管理、图书管理系统。此项目为图书管理系统前台，使用vue.js,vue-resource,vue-router,.zip
02-04
Vue.js是一个轻量级的JavaScript框架，它以其易用性、灵活性和高性能受到开发者喜爱。Vue的核心特性包括组件化、虚拟DOM、响应式数据绑定和路由管理。在本图书管理系统中，Vue.js用于创建用户界面组件，管理页面状态...
ThinkPHP5.1后台搭建项目3---菜单管理（layui数据表格、表单赋初值）
luyangsiyi的博客
11-19 2296
文章目录1、实现功能2、跳转实现3、显示全部菜单数据4、搜索显示菜单数据5、添加菜单6、每一行数据的显示和编辑 1、实现功能 （1）直接显示现有菜单数据（分页显示） （2）搜索显示菜单数据 （3）菜单的添加 （4）每一行数据的编辑和删除 2、跳转实现 在view/index/index.html中对应的部分添加a标签跳转地址： <li class="layui-nav-item">...
怎样在 EBS 里面找到一个 Form
专栏
11-07 1115
比方说客户告诉你一个 form 上有
009-快速构建一个业务模块
jfok的专栏
05-11 535
视频讲解地址：009-快速构建一个业务模块(3)_哔哩哔哩_bilibili009-快速构建一个业务模块(3)https://www.bilibili.com/video/BV1w34y1i7dp?spm_id_from=333.999.0.0 本演示讲解一个模拟业务模块从导入到配置的过程，使您可以快速了解本系统的运行和架构方式。 1、登录系统 使用 administrator 用户登录系统，此用户是对系统进行架构的默认用户。 2、建立一个业务系统表 以下SQL语句建立了一个模块的业务系统表，包括
封装公共el-form表单（记录）
qq_41429765的博客
08-23 440
【代码】封装公共el-form表单（记录）
Vue Element组件动态el-tab嵌套form表单验证
qq_33398946的博客
12-02 5128
想找动态增减tab页的表单动态验证示例，网上的文章基本上都是固定多tab页的验证，el-form-item的prop书写格式也极为麻烦，按搜到的文章教程敲了半天，一直报错prop路径不对。 最后索性直接在外层套一个div用if来控制dom中只显示当前选择的tab页，这样el-from-item中就不用:prop外加一大串的复杂路径拼接，还是用prop就能确定验证的字段路径了。 <el-tabs v-model="editableTabsValue" type="card" closable @tab-
element-ui动态切换表头以及表格里的内容
shitou_z的博客
08-18 968
前两天因为业务需要需要做动态的表头切换和动态的切换内容，找了找资料后实现了这一效果 因为是活得所以需要在table里面循环el-table-column这个代码并且给他加上你所需的参数如lable以及property这两个比较重要的参数下面是table的配置代码以及你所需要的json也要进行相对应的改变 <el-table @cell-click="okdd" class="tableX" he...
form的编辑与展示的切换(输入框，单选多选框，上传图片，颜色选择器)适用个人信息的展示与修改
TangJing_的博客
07-29 894
form的编辑与展示的切换。上传图片(用于展示头像)编辑时每次仅只能上传一张图片，上传完成后回显且隐藏上传框，删除图片后显示上传框。可对图片进行预览，判断上传文件的类型与大小。
ElementUI，table页面实现两个页面的切换
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
08-16 2103
前端Tabe页面
element的el-form和el-table嵌套使用
热门推荐
ddx2019的博客
08-24 2万+
<template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 10
vue2+iview2，使用tabs嵌套iframe，关闭一个tabpane导致下一个tabpane内嵌套的iframe显示不出来（被隐藏了、白屏）。
weixin_42640226的博客
01-31 982
vue2+iview2在使用iview的tabs组件时，关闭tabs遇到的白屏问题
el-form 表单 一行三个
05-24
你可以使用 el-row 和 el-col 嵌套实现 el-form 表单一行三个的效果。 具体做法如下： ```html <template> <el-form> <el-row> <el-col :span="8"> <el-form-item label="姓名"> <el-input v-model="name"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="年龄"> <el-input v-model="age"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="性别"> <el-select v-model="gender"> <el-option label="男" value="male"></el-option> <el-option label="女" value="female"></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> </template> ``` 在上述代码中，el-row 代表一行，然后在每个 el-row 中分别嵌套三个 el-col。每个 el-col 的 span 属性设置为 8，表示占用 8 格，一行共 24 格，这样就实现了一行三个的效果。每个 el-col 中再嵌套一个 el-form-item，用来展示表单项的 label 和表单控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值