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