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-cascader
                placeholder="请选择产业环节"
                :options="optionsLink"
                v-model="ruleForm.INDUSTRY_LIST"
                :props="defaultProps"
                :show-all-levels="false"
                collapse-tags
                clearable
                class="form-input"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="所在地区：" label-width="80px">
              <el-cascader
                placeholder="请选择所在地区"
                :options="optionsArea"
                v-model="ruleForm.CURRENT_AREA"
                :props="areaProps"
                :show-all-levels="false"
                collapse-tags
                clearable
                class="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-cascader
                placeholder="请选择业务标签"
                :options="optionsLabel"
                v-model="ruleForm.CONCEPT_TAG_LSIT"
                :props="labelProps"
                :show-all-levels="false"
                collapse-tags
                clearable
                class="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);