当前位置: 首页 > news >正文

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…...

基于微信小程序的驾校预约系统设计与实现

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图文章目录 前言 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 当今社会已经步入了科学技术进步和经济社会快速发展的新时期&#xff0c;国际信息和学术交流也不…...

利用python进行数据处理,得到对自己有利的内容

一&#xff0c;介绍 在2025年的公务员录取信息发布后&#xff0c;许多考生和求职者可能会感到困惑&#xff0c;尤其是在面对庞大的职位列表时&#xff0c;如何快速找到适合自己的职位成为了一个亟待解决的问题。面对这样的问题&#xff0c;以下几点建议或许能够帮助大家更有效地…...

Java面试题五

一、谈谈你对Java内存模型&#xff08;JVM Memory Model&#xff09;的理解。 Java内存模型&#xff08;Java Memory Model&#xff0c;简称JMM&#xff09;是Java虚拟机&#xff08;JVM&#xff09;规范中定义的一种关于内存访问、共享变量在多线程之间的可见性、以及原子性、…...

2013 lost connection to MySQL server during query

1.问题 使用navicat连接doris&#xff0c;会有这个错误。 2.解决 换低版本的navicat比如navicat11。...

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-1

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…...

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 …...

从经济学原理看团队分工合作

最近我接触到一个经济学概念叫"比较优势"。学过经济学的同学应该很熟悉&#xff0c;但为了让不了解经济学的朋友们也能明白&#xff0c;我们先来解释下什么是比较优势&#xff0c;然后再谈谈为什么我认为这个原理应当被用在团队合作的分工当中。 比较优势是19世纪初…...

企业一级流程架构规划方法

在之前关于企业业务流程规划的系列文章中&#xff0c;我们已经分别对企业业务流程规划的价值和原则、企业的业务流程架构的应用、两种常见的企业总体业务流程架构模式等进行了比较深入的分析和阐述&#xff0c;相信大多数企业同仁&#xff0c;已经对企业的业务流程规划&#xf…...

用ESP32驱动stt7735 TFT屏幕

操作流程&#xff1a; 1 在esp32项目中搜索TFT库 2 找到对应TFT_eSPI库&#xff0c;添加进所在项目中&#xff08;这里可能下载很久&#xff09; 3 找到对应屏幕文件下的User_Setup.h 修改&#xff0c;将驱动换成ST7735_DRIVER&#xff0c;并修改对应屏幕引脚和屏幕尺寸&…...

Yolo目标检测:Yolo v1简介

一、Yolo系列介绍 YOLO&#xff08;You Only Look Once&#xff09;是一种基于深度学习的目标检测算法&#xff0c;由Joseph Redmon等人于2016年提出。它的核心思想是将目标检测问题转化为一个回归问题&#xff0c;通过一个神经网络直接预测目标的类别和位置。YOLO算法将输入图…...

Java動態轉發代理IP詳解

Java中實現動態轉發代理IP 在Java中實現動態轉發代理IP並不複雜&#xff0c;通常可以通過一些開源庫和框架來實現。下麵是一個簡單的實現思路&#xff1a; 設置HTTP請求&#xff1a;在Java中&#xff0c;可以使用HttpURLConnection或Apache HttpClient來發送HTTP請求。在發送…...

Android15之解决gdb:Remote register badly formatted问题(二百三十六)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…...

【Router】路由器中NAT、NAPT、NPT是什么?

参考链接 NAT vs. NAPT: What’s the Difference? IPv6 Network Prefix Translation (NPt) | pfSense Documentation (netgate.com) 趣谈NAT/NAPT的原理&#xff0c;这篇不可不读&#xff01; - 知乎 (zhihu.com) NAT (Network Address Translation) NAT说明 NAT&#x…...

代码随想录算法训练营第三十九天|背包问题,416. 分割等和子集

背包问题&#xff0c;416. 分割等和子集 背包问题416. 分割等和子集 背包问题 有N件物品和一个最多能背重量为W 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 卡玛网的…...

可调用对象和Lambda

可调用对象&#xff1a; 函数 函数指针 函数对象 Lambda表达式(匿名函数) 01 函数对象 如果一个类实现了"函数调用运算符()"的重载&#xff0c;那么这个类的对象称为函数对象(仿函数) 函数对象的行为&#xff0c;类似于函数&#xff0c;可以被调用 #include …...

华为认证HCIE存储考啥?未来发展方向在哪?一个月就能轻松拿下?

说起HCIE&#xff0c;很多人第一反应都是路由交换、网络安全那些“热门”方向&#xff0c;而存储方向反而成了小众的存在。 其实&#xff0c;存储的江湖地位一点不低&#xff0c;尤其在数据爆炸的时代。 今天咱们就聊聊HCIE存储考什么、为什么要学&#xff0c;以及未来的可能…...

如何让自己的网站,被更多的人搜索到(免费方案)

文章目录 一、要做时间的朋友二、需要独立IP的服务器三、SEO信息如何设置设置网站TDK生成网站地图设置搜索引擎自动提交部署SSL证书加分项&#xff1a;定期更新文章 引言&#xff1a; 许多人都有这样一个问题&#xff1a;做好自己的网站&#xff0c;如何让这个网站被更多的人浏…...

Modbus 协议:工业自动化领域的通信脊梁

一、引言 在当今工业自动化的舞台上&#xff0c;数据的准确传输和设备间的有效通信是实现高效生产、精准控制的关键。Modbus 协议作为一种应用广泛、历史悠久的通信协议&#xff0c;在工业领域发挥着举足轻重的作用。从工厂的生产线到智能建筑的控制系统&#xff0c;从能源管理…...

函数的力量:掌握C语言的基石

目录 前言 标准库&#xff1a;C语言的百宝箱 头文件&#xff1a;库函数的藏宝图 实例分析&#xff1a;计算平方根的sqrt函数 功能描述 头文件包含的重要性 库函数文档的一般格式 自定义函数&#xff1a;释放你的编程创造力 函数的语法形式 函数的比喻 函数的举例 简化…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...