Form表单子项的显示和隐藏

最新推荐文章于 2024-08-14 13:24:03 发布
原创 最新推荐文章于 2024-08-14 13:24:03 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用 ExtJS 框架中的 Ext.get 方法来实现控件的显示与隐藏功能。通过简单的 JavaScript 代码示例，展示了如何针对指定的组合框进行操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

显示

Ext.get("protectTypeCombo").dom.parentNode.parentNode.parentNode.style.display = 'block';

 

隐藏

Ext.get("protectTypeCombo").dom.parentNode.parentNode.parentNode.style.display = 'none';

Ext.Net 1.x_Ext.Net.常用控件属性集合
德仔
09-14 5315
转自：http://blog.youkuaiyun.com/lulu_jiang/article/category/669748  Ext_数字输入框_Ext.form.NumberField: /* Ext.form.NumberField独有配置表: allowDecimals             Boolean             是否允许输入小数(默认true) allo
(HTML+CSS)表单属性学习
hjp9906的博客
08-03 2106
表单的构成与创建 一个完整的表单通常由表单元素、提示信息和表单域3个部分构成。 在HTML5中，form标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下。 form action="url 地址" method="提交 方式" name="表单名称"> 各种表单控件 </form 表单属性 表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。 action属性 在表单收集到
隐藏表单方法
04-04
软件在运行时有些表单老是显示在窗口既不美观也不方便
表单的显示与隐藏
xiaoyu_alive的博客
02-10 8097
输入框输入数据，点击 显示按钮 显示表单信息，显示的信息和输入框输入的内容有关，不同的输入显示不同的表单信息。 点击隐藏按钮，可以隐藏表单信息。
form表单按钮根据编辑/只读状态显示和隐藏
鹿哥
07-31 389
odoo form表单自定义按钮显示/隐藏
用JQuery+CSS实现form表单的显示和隐藏
nc_wanjing的专栏
03-21 6589
1、首先你要先把JQuery.js库导入到你的项目中去。 2、然后再你的index.html应用你的JQuery.js和你的CSS 3、在你的index.html中写入如下代码： 登陆X username: password: 确定 显示  4、调好你的form的布局： #f{ width: 250px; border: 2px; }
web前端-Vue动态显示隐藏表单el-form-item
热门推荐
MinggeQingchun的博客
12-08 1万+
给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <!-- 类别展示隐藏 --> <el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType"> <el-select v-model="for
基于vue3+ts配置化form表单组件实现浅析
junner443的博客
06-20 6976
基于vue3+ts配置化form表单组件实现浅析，同时兼容element-plus和ant-design-vue
<div v-show="showSearch" class="inner-search"> <div class="inner-search-line">查询表格</div> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="98px"> <div class="inner-flex"> <el-row class="inner-left"> <el-col :span="6"> <el-form-item label="楼宇编号" prop="buildingLightCode"> <el-input v-model="queryParams.buildingLightCode" placeholder="请输入楼宇编号" clearable @keyup.enter="handleQuery" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="所在区域" prop="region"> <el-select v-model="queryParams.region" placeholder="请选择所在区域" clearable> <el-option v-for="dict in sys_region_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设施状态" prop="equipStatus"> <el-select v-model="queryParams.equipStatus" placeholder="请选择设施状态" clearable> <el-option v-for="dict in sys_status_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路类型" prop="roadType"> <el-select v-model="queryParams.roadType" placeholder="请选择道路类型" clearable @change="handleRoadTypeChange"> <el-option v-for="dict in sys_road_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路名称" prop="roadName"> <el-input v-model="queryParams.roadName" placeholder="请选择道路名称" clearable filterable :disabled="!queryParams.roadType" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="楼宇灯类型" prop="buildingLightCategory"> <el-select v-model="queryParams.buildingLightCategory" placeholder="请选择楼宇灯类型" clearable> <el-option v-for="dict in sys_building_light_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="光源类型" prop="lightCategory"> <el-select v-model="queryParams.lightCategory" placeholder="请选择光源类型" clearable> <el-option v-for="dict in sys_light_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建时间"> <el-date-picker style="width: 100%; max-width: 268px" v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> </el-col> </el-row> <div class="inner-right"> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </div> </div> </el-form> </div> 分析这段代码的结构，告诉我其中的组件都是怎么用的
最新发布
07-18
总结结构：外层控制显示的div -> 表单标题 -> el-form表单（内部分为左侧表单项栅格布局和右侧按钮区域） -> 多个表单项（输入框、下拉选择、日期范围选择） -> 按钮组。 组件使用上，主要用到了Element UI的el-...
// 切换子菜单显示或隐藏 document.querySelector(".has-submenu").addEventListener('click',function(){ // 获取当前点击的菜单子元素(子菜单) const submenu=this.nextElementSibling; // 切换子菜单或隐藏 submenu.classList.toggle('active'); // 切换箭头图标旋转180度 const icon=this.querySelector('.arrow-icon'); icon.classList.toggle('rotate-180'); }); // 点击菜单后切换对应的主页内容 document.querySelectorAll(".sidebar-item[data-page]").forEach(function(item){ item.addEventListener("click", function(){ // 先移除所选菜单的active类 document.querySelectorAll(".sidebar-item").forEach(function(menuItem){ menuItem.classList.remove("active"); }); // 为当前点击的的菜单项添加active类 this.classList.add("active"); // 隐藏所有页面的 document.querySelectorAll(".page-content").forEach(function (page){ page.classList.remove("active"); }); // 显示对应页面 const pageId=this.getAttribute("data-page"); document.getElementById(pageId).classList.add("active"); }); }); // 用户菜单的动态交互 document.addEventListener("DOMContentLoaded",function(){ const menuToggle=document.getElementById("userMenuToggle"); const menuContent=document.getElementById("userMenuContent"); const logoutBtn=document.getElementById("logoutBtn"); // 切换菜单显示状态 menuToggle.addEventListener("click",function(e){ e.stopPropagation(); menuContent.classList.toggle("active"); }); // 点击外部来关闭下拉菜单 document.addEventListener("click",function(e){ if(!menuToggle.contains(e.target)&&!menuContent.contains(e.target)){ menuContent.classList.remove("active"); } }); // 退出登录功能 logoutBtn.addEventListener("click",function(e){ e.preventDefault(); if(confirm("确定要退出登录吗？")){ window.location.href="../Login.html"; menuContent.classList.remove("active"); } }); });怎么实现增删改查的功能
06-13
我们将构建一个表格，并包含以下元素：-表单用于输入新数据（姓名和年龄）-按钮：添加、删除（每行一个删除按钮）、修改（每行一个修改按钮，点击后将该行数据填入表单，然后修改为更新操作）-表格显示数据另外，...
VUE元素的隐藏和显示（v-show指令)
08-30
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
表单的隐藏与显示
weixin_30576827的博客
02-05 1420
hHTML中写css和JavaScript其中两个例子 1.下单的隐藏与展示 <html> 　　<head> 　　　　<meta charset="utf-8"> 　　　　<title>下单的隐藏与展示</title> 　　　　<style type="text/css"> 　　　　　　#myDiv{ ...
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-23 1万+
1、如何在前端vue中隐藏某一个元素（el-form-item怎样隐藏） 给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id"> <el-input v-model="ruleForm
form 中某一个字段、组件隐藏/显示
weixin_30641465的博客
12-31 2347
form表单有时需要隐藏/显示某些字段，具体方法如下： 隐藏时： var _form = form.getForm(); // 查询form中name为quarter字段 _form.findField("quarter").el.dom.parentNode.parentNode.parentNode.style.display = 'none'; 　　或者 ...
用javascript怎么实现一个form的隐藏与显示
小贺的博客
05-21 1万+
&lt;form id='fm'&gt; //隐藏 document.getElementById('fm').style.display='none'; //显示 document.getElementById('fm').style.display=''; //隐藏 document.getElementById('fm').style.display='none'; //显示 docume...
elementui form表单el-form-item使用v-show控制显示隐藏，在提交时 rules 验证错误的问题
weixin_43601701的博客
06-09 1万+
本篇博文深入研究了在使用Element UI构建表单时的一项常见挑战——即便表单项被隐藏，仍然会进行验证。这个问题的出现源于Vue的v-show指令。我们提出了两种创新策略和对应的代码示例来克服这个问题：首先，我们引入Vue的v-if指令来控制表单项的渲染，这样就可以避免对隐藏的表单项进行验证；其次，我们引入动态的验证规则，这样在隐藏表单项时，可以同时移除对应的验证规则。这两种方法都能有效地解决表单验证的"隐形"问题，提升了Element UI表单的性能和用户体验。这篇博文对于前端开发者来说具有很高的参考
封装Form表单【后台控制表单搜索项的显隐和排序】
qq_52335038的博客
08-14 1153
为了实现需求：后台控制表单搜索项的显隐和排序；
vue-利用属性（v-if）控制表单（el-form-item）显示/隐藏
qq_17328759的博客
02-21 3681
v-if控制el-form-item显示、隐藏
elementUI中的form-item表单使用了v-show进行隐藏，那么提交表单进行表单验证的时候，还会验证这个表单吗
weixin_48975022的博客
05-23 3197
表单元素时，该表单元素仍然会被渲染到 DOM 中，因此在提交表单时，该元素的验证依然会被触发。元素时，它不会被渲染到 DOM 中，因此在提交表单时也不会进行验证。表单元素后禁用其验证，可以考虑使用。例如，下面的示例中，一个。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值