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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【vivado】vivado联合modelsim仿真

操作步骤 1 编译Vivado仿真库2 设置仿真工具和库路径3 启动modelsim仿真 1 编译Vivado仿真库 等待编译完成。 2 设置仿真工具和库路径 打开vivado工程文件&#xff0c; 点击tool–>Setting 更改编译器为modelsimulator&#xff0c;并悬着编译库文件 3 启动modelsim仿真…

介绍 TensorFlow 的基本概念和使用场景(AI)

TensorFlow是由Google开发的一个开源机器学习框架&#xff0c;它可以用于构建和训练各种机器学习模型。TensorFlow的基本概念和使用场景如下&#xff1a; 1. 张量&#xff08;Tensor&#xff09;&#xff1a;TensorFlow中的主要数据结构是张量&#xff0c;它是多维数组&#x…

整理—MySQL

目录 NOSQL和SQL的区别 数据库三大范式 MySQL 怎么连表查询 MySQL如何避免重复插入数据&#xff1f; CHAR 和 VARCHAR有什么区别&#xff1f; Text数据类型可以无限大吗&#xff1f; 说一下外键约束 MySQL的关键字in和exist mysql中的一些基本函数 SQL查询语句的执行顺…

Java爬虫:从入门到精通实战指南

在信息技术飞速发展的今天&#xff0c;数据已成为最宝贵的资源之一。Java作为一种成熟且功能强大的编程语言&#xff0c;不仅在企业级应用开发中占据主导地位&#xff0c;也成为了编写爬虫程序的理想选择。Java爬虫能够自动化地从网页或API中提取数据&#xff0c;为数据分析、机…

如何利用边缘计算网关进行工厂设备数据采集?天拓四方

边缘计算网关集成了数据采集、处理和传输功能&#xff0c;位于传感器和执行器组成的设备层与云计算平台之间。它能够实时处理和响应本地设备的数据请求&#xff0c;减轻云平台的压力&#xff0c;提高数据处理的速度和效率。同时&#xff0c;边缘计算网关还可以将处理后的数据上…

第J2周:ResNet50V2算法实战与解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 1.ResNetV2结构与ResNet结构对比 &#x1f9f2; 改进点&#xff1a;(a)original 表示原始的 ResNet 的残差结构&#xff0c;(b)proposed 表示新的 ResNet 的残…

Chromium window.document对象c++实现

一、前端Document 对象 当浏览器载入 HTML 文档, 它就会成为 Document 对象。 Document 对象是 HTML 文档的根节点。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示&#xff1a;Document 对象是 Window 对象的一部分&#xff0c;可通过 window.…

【HTML + CSS 魔法秀】打造惊艳 3D 旋转卡片

HTML结构 box 类是整个组件的容器。item-wrap 类是每个旋转卡片的包装器&#xff0c;每个都有一个内联样式–i&#xff0c;用于控制动画的延迟。item类是实际的卡片内容&#xff0c;包含一个图片。 <template><div class"box"><div class"item…

了解Android中为什么需要多线程?

在Android开发中&#xff0c;多线程是一个至关重要的概念。理解并合理应用多线程&#xff0c;可以显著提升应用的性能和用户体验。 一、Android多线程的基本概念 1. 主线程与UI线程 在Android中&#xff0c;主线程也称为UI线程&#xff0c;它负责处理用户输入、事件分发、绘…

【完-网络安全】Windows防火墙及出入站规则

文章目录 防火墙入站和出站的区别域网络、专用网络、公用网络的区别 防火墙 防火墙默认状态一般是出站允许&#xff0c;入站阻止。 入站和出站的区别 入站就是别人来访问我们的主机&#xff0c;也就是正向shell的操作 出站就是反向shell&#xff0c;主机需要主动连接kali&am…

leetcode动态规划(二)-斐波那契数列

题目 509.斐波那契数列 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0…

等保测评:如何进行有效的安全风险管理

等保测评&#xff0c;全称为信息安全等级保护测评&#xff0c;是一种对信息系统和网络安全状况进行评估的过程。其目的是评估系统和网络的安全性&#xff0c;识别潜在的安全风险&#xff0c;并提供安全策略和建议以确保系统和网络的安全性。 等保测评的重要性 等保测评对于组织…

vue播放flv和rtsp 格式视频

vue播放flv和rtsp 格式视频 调用 <znvVideo:vId"0":src"url":type"rtsp"></znvVideo>1.播放flv "flv.js":"1.6.2" 新建znVido.vue <template><div class"box-video" :id"box-video…

构建物联网智能项目的框架与实践

1. 引言 物联网(Internet of Things, IoT)技术已经深入应用到各个领域,从智能家居、智慧城市到工业4.0,其应用的广度与深度不断扩展。物联网智能项目集成了传感器、网络、计算和自动化系统,通过智能化的设备和数据分析实现各种任务的自动执行与优化。随着大数据、人工智能…

机器学习—特性缩放

特性缩放的技术能使梯度下降运行得更快&#xff0c;让我们先来看看功能大小之间的关系&#xff0c;这就是该特性的数字和相关参数的大小&#xff0c;作为一个具体的例子&#xff0c;让我们用两个特征来预测房子的价格&#xff0c;X1代表一个房子的大小&#xff0c;X2代表两个卧…

【黑马点评优化】之使用Caffeine+Redis实现应用级二层缓存

【黑马点评优化】之使用CaffeineRedis实现应用级二层缓存 1 缓存雪崩定义及解决方案2 为什么要使用多级缓存3 RedisCaffeine实现应用层二级缓存原理4 利用CaffeineRedis解决Redis突然宕机导致的缓存雪崩问题4.1 pom.xml文件引入相关依赖4.2 本地缓存配置类4.3 修改ShopServiceI…

UE5 使用Animation Budget Allocator优化角色动画性能

Animation Budget Allocator是UE内置插件&#xff0c;通过锁定动画系统所占CPU的预算&#xff0c;在到达预算计算量时对动画进行限制与优化。 开启Animation Budget Allocator需要让蒙皮Mesh使用特定的组件&#xff0c;并进行一些编辑器设置即可开启。 1.开启Animation Budget…

Tailwind Starter Kit 一款极简的前端快速启动模板

Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素&#xff0c;并附带了ReactJS、Vue和Angul…

k8s中的微服务

一、什么是微服务 用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f;需要通过微服务暴漏出去后才能被访问 Service是一组提供相同服务的Pod对外开放的接口。 借助Service&#xff0c;应用可以实现服务发现和负载均衡。 service默认只支持4层负载均…

二叉树与堆讲解

目录 1.树的概念及结构 1.树的概念 2.树的相关概念 3.树的表示 2.二叉树 1.概念 2.特殊的二叉树 1.满二叉树 2.完全二叉树 3.二叉树的性质 4.二叉树的存储结构 1.顺序结构 2.链式存储 3.堆 1.堆的概念及结构 2.堆的实现 1.堆的创建 2.堆的初始化&#xff08;H…