Js 更加优雅地实现Form表单重置
文章目录
- 前言
- 代码实现
- 代码优化
前言
最近在做一个后台项目 不免大量使用表单 表单查询 编辑 还原 导入导出
不免要经常实现 记录下表单重置的一些方法
代码实现
<div class="Query"><el-form :model="ruleForm" ref="ruleFormref" label-width="100px" label-position="left"><el-row type="flex" justify="space-between"><el-form-item label="企业名称:" label-width="80px"><el-input v-model="ruleForm.COMPONAY_NAME" placeholder="请输入企业名称" suffix-icon="XXX" class="form-input"></el-input></el-form-item><el-form-item label="产业环节:" label-width="80px"><el-cascaderplaceholder="请选择产业环节":options="optionsLink"v-model="ruleForm.INDUSTRY_LIST":props="defaultProps":show-all-levels="false"collapse-tagsclearableclass="form-input"></el-cascader></el-form-item><el-form-item label="所在地区:" label-width="80px"><el-cascaderplaceholder="请选择所在地区":options="optionsArea"v-model="ruleForm.CURRENT_AREA":props="areaProps":show-all-levels="false"collapse-tagsclearableclass="form-input"></el-cascader></el-form-item></el-row><el-row type="flex" justify="space-between"><!--数据不确定 暂未实现 --><el-form-item label="产业标签:" label-width="80px"><el-select placeholder="请选择产业标签" v-model="ruleForm.INDUSTRY_TAGS_LIST" collapse-tags clearable multiple class="form-input"><el-option v-for="item in optionsType" :key="item.dicId" :label="item.dicName" :value="item.value"></el-option></el-select></el-form-item><el-form-item label="业务标签:" label-width="80px"><el-cascaderplaceholder="请选择业务标签":options="optionsLabel"v-model="ruleForm.CONCEPT_TAG_LSIT":props="labelProps":show-all-levels="false"collapse-tagsclearableclass="form-input"></el-cascader></el-form-item><el-form-item label="我行客户:" label-width="80px"><el-select placeholder="请选择是否我行客户" v-model="ruleForm.IS_CUSTOMER" collapse-tags clearable class="form-input"><el-option label="是" value="是"></el-option><el-option label="否" value="否"></el-option></el-select></el-form-item></el-row><el-row type="flex" justify="space-between"><el-form-item label="货种:" label-width="80px"><el-select placeholder="请选择货种" v-model="ruleForm.CURRENT_COMMODITY" collapse-tags clearable class="form-input"><el-option v-for="(item, index) in cargoNameList" :key="index" :label="item.dictName" :value="item.dictName"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="searchClick">查询</el-button><el-button @click="resetClick">重置</el-button></el-form-item></el-row></el-form></div>ruleForm: any = {CONCEPT_TAG_LSIT: [], // 当前业务标签INDUSTRY_LIST: [], // 当前产业环节CURRENT_AREA: [], // 当前所在地区INDUSTRY_TAGS_LIST: [], // 当前产业标签列表COMPONAY_NAME: '', // 企业名称CURRENT_COMMODITY: '', // 当前货种IS_CUSTOMER: '', // 是否我行客户};resetClick() {this.ruleForm = {CONCEPT_TAG_LSIT: [], // 当前业务标签INDUSTRY_LIST: [], // 当前产业环节CURRENT_AREA: [], // 当前所在地区INDUSTRY_TAGS_LIST: [], // 当前产业标签列表COMPONAY_NAME: '', // 企业名称CURRENT_COMMODITY: '', // 当前货种IS_CUSTOMER: '', // 是否我行客户};}
常规的一个表单查询 重置方法自然这样 不过我们可以在上面做些改进
代码优化
代码改进一 调用 resetFields
<el-form :model="ruleForm" ref="ruleFormref" label-width="100px" label-position="left"></el-form>// 默认的表单值defaultRuleForm: any = {CONCEPT_TAG_LSIT: [],INDUSTRY_LIST: [],CURRENT_AREA: [],INDUSTRY_TAGS_LIST: [],COMPONAY_NAME: '',CURRENT_COMMODITY: '',IS_CUSTOMER: '',};ruleForm: any = { ...this.defaultRuleForm };resetClick() {this.$refs.ruleFormref.resetFields();}
代码改进二 调用 Object.assign 对象合并
defaultRuleForm: any = {CONCEPT_TAG_LSIT: [],INDUSTRY_LIST: [],CURRENT_AREA: [],INDUSTRY_TAGS_LIST: [],COMPONAY_NAME: '',CURRENT_COMMODITY: '',IS_CUSTOMER: '',};
ruleForm: any = { ...this.defaultRuleForm };
Object.assign(this.ruleForm, this.defaultRuleForm);
相关文章:
Js 更加优雅地实现Form表单重置
文章目录 前言代码实现代码优化 前言 最近在做一个后台项目 不免大量使用表单 表单查询 编辑 还原 导入导出 不免要经常实现 记录下表单重置的一些方法 代码实现 <div class"Query"><el-form :model"ruleForm" ref"ruleFormref" labe…...
基于微信小程序的驾校预约系统设计与实现
文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图文章目录 前言 文章底部名片,获取项目的完整演示视频,免费解答技术疑问 项目介绍 当今社会已经步入了科学技术进步和经济社会快速发展的新时期,国际信息和学术交流也不…...
利用python进行数据处理,得到对自己有利的内容
一,介绍 在2025年的公务员录取信息发布后,许多考生和求职者可能会感到困惑,尤其是在面对庞大的职位列表时,如何快速找到适合自己的职位成为了一个亟待解决的问题。面对这样的问题,以下几点建议或许能够帮助大家更有效地…...
Java面试题五
一、谈谈你对Java内存模型(JVM Memory Model)的理解。 Java内存模型(Java Memory Model,简称JMM)是Java虚拟机(JVM)规范中定义的一种关于内存访问、共享变量在多线程之间的可见性、以及原子性、…...
2013 lost connection to MySQL server during query
1.问题 使用navicat连接doris,会有这个错误。 2.解决 换低版本的navicat比如navicat11。...
【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-1
文件下载与邀请翻译者 学习英特尔开发手册,最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册,会是一件耗时费力的工作。如果有愿意和我一起来做这件事的,那么ÿ…...
Android便携式WLAN热点分析
Android便携式WLAN热点分析 Platform: RK3368 OS: Android 6.0 Kernel: 3.10.0 文章目录 Android便携式WLAN热点分析分析Android开启WLAN热点的路由策略和防火墙便携式WLAN热点开启流程路由表路由策略iptables(防火墙) 用hostapd命令手动开启WLAN热点1.加载驱动2.配置wlan0 …...
从经济学原理看团队分工合作
最近我接触到一个经济学概念叫"比较优势"。学过经济学的同学应该很熟悉,但为了让不了解经济学的朋友们也能明白,我们先来解释下什么是比较优势,然后再谈谈为什么我认为这个原理应当被用在团队合作的分工当中。 比较优势是19世纪初…...
企业一级流程架构规划方法
在之前关于企业业务流程规划的系列文章中,我们已经分别对企业业务流程规划的价值和原则、企业的业务流程架构的应用、两种常见的企业总体业务流程架构模式等进行了比较深入的分析和阐述,相信大多数企业同仁,已经对企业的业务流程规划…...
用ESP32驱动stt7735 TFT屏幕
操作流程: 1 在esp32项目中搜索TFT库 2 找到对应TFT_eSPI库,添加进所在项目中(这里可能下载很久) 3 找到对应屏幕文件下的User_Setup.h 修改,将驱动换成ST7735_DRIVER,并修改对应屏幕引脚和屏幕尺寸&…...
Yolo目标检测:Yolo v1简介
一、Yolo系列介绍 YOLO(You Only Look Once)是一种基于深度学习的目标检测算法,由Joseph Redmon等人于2016年提出。它的核心思想是将目标检测问题转化为一个回归问题,通过一个神经网络直接预测目标的类别和位置。YOLO算法将输入图…...
Java動態轉發代理IP詳解
Java中實現動態轉發代理IP 在Java中實現動態轉發代理IP並不複雜,通常可以通過一些開源庫和框架來實現。下麵是一個簡單的實現思路: 設置HTTP請求:在Java中,可以使用HttpURLConnection或Apache HttpClient來發送HTTP請求。在發送…...
Android15之解决gdb:Remote register badly formatted问题(二百三十六)
简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…...
【Router】路由器中NAT、NAPT、NPT是什么?
参考链接 NAT vs. NAPT: What’s the Difference? IPv6 Network Prefix Translation (NPt) | pfSense Documentation (netgate.com) 趣谈NAT/NAPT的原理,这篇不可不读! - 知乎 (zhihu.com) NAT (Network Address Translation) NAT说明 NAT&#x…...
代码随想录算法训练营第三十九天|背包问题,416. 分割等和子集
背包问题,416. 分割等和子集 背包问题416. 分割等和子集 背包问题 有N件物品和一个最多能背重量为W 的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品只能用一次,求解将哪些物品装入背包里物品价值总和最大。 卡玛网的…...
可调用对象和Lambda
可调用对象: 函数 函数指针 函数对象 Lambda表达式(匿名函数) 01 函数对象 如果一个类实现了"函数调用运算符()"的重载,那么这个类的对象称为函数对象(仿函数) 函数对象的行为,类似于函数,可以被调用 #include …...
华为认证HCIE存储考啥?未来发展方向在哪?一个月就能轻松拿下?
说起HCIE,很多人第一反应都是路由交换、网络安全那些“热门”方向,而存储方向反而成了小众的存在。 其实,存储的江湖地位一点不低,尤其在数据爆炸的时代。 今天咱们就聊聊HCIE存储考什么、为什么要学,以及未来的可能…...
如何让自己的网站,被更多的人搜索到(免费方案)
文章目录 一、要做时间的朋友二、需要独立IP的服务器三、SEO信息如何设置设置网站TDK生成网站地图设置搜索引擎自动提交部署SSL证书加分项:定期更新文章 引言: 许多人都有这样一个问题:做好自己的网站,如何让这个网站被更多的人浏…...
Modbus 协议:工业自动化领域的通信脊梁
一、引言 在当今工业自动化的舞台上,数据的准确传输和设备间的有效通信是实现高效生产、精准控制的关键。Modbus 协议作为一种应用广泛、历史悠久的通信协议,在工业领域发挥着举足轻重的作用。从工厂的生产线到智能建筑的控制系统,从能源管理…...
函数的力量:掌握C语言的基石
目录 前言 标准库:C语言的百宝箱 头文件:库函数的藏宝图 实例分析:计算平方根的sqrt函数 功能描述 头文件包含的重要性 库函数文档的一般格式 自定义函数:释放你的编程创造力 函数的语法形式 函数的比喻 函数的举例 简化…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术,通过密码学、共识机制和智能合约等核心组件,实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点:数据存储在网络中的多个节点(计算机),而非…...
