当前位置: 首页 > 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;释放你的编程创造力 函数的语法形式 函数的比喻 函数的举例 简化…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...