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

Js 更加优雅地实现Form表单重置

news 2025/7/26 12:16:07

文章目录

前言
代码实现
代码优化

前言

最近在做一个后台项目不免大量使用表单表单查询编辑还原导入导出
不免要经常实现记录下表单重置的一些方法

代码实现

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