前言

最近在做一個后臺項目 不免大量使用表單 表單查詢 編輯 還原 導入導出
不免要經(jīng)常實現(xiàn) 記錄下表單重置的一些方法

代碼實現(xiàn)

<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="企業(yè)名稱：" label-width="80px"><el-input v-model="ruleForm.COMPONAY_NAME" placeholder="請輸入企業(yè)名稱" suffix-icon="XXX" class="form-input"></el-input></el-form-item><el-form-item label="產(chǎn)業(yè)環(huán)節(jié)：" label-width="80px"><el-cascaderplaceholder="請選擇產(chǎn)業(yè)環(huán)節(jié)":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="所在地區(qū)：" label-width="80px"><el-cascaderplaceholder="請選擇所在地區(qū)":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"><!--數(shù)據(jù)不確定 暫未實現(xiàn) --><el-form-item label="產(chǎn)業(yè)標簽：" label-width="80px"><el-select placeholder="請選擇產(chǎn)業(yè)標簽" 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="業(yè)務標簽：" label-width="80px"><el-cascaderplaceholder="請選擇業(yè)務標簽":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: [], // 當前業(yè)務標簽INDUSTRY_LIST: [], // 當前產(chǎn)業(yè)環(huán)節(jié)CURRENT_AREA: [], // 當前所在地區(qū)INDUSTRY_TAGS_LIST: [], // 當前產(chǎn)業(yè)標簽列表COMPONAY_NAME: '', // 企業(yè)名稱CURRENT_COMMODITY: '', // 當前貨種IS_CUSTOMER: '', // 是否我行客戶};resetClick() {this.ruleForm = {CONCEPT_TAG_LSIT: [], // 當前業(yè)務標簽INDUSTRY_LIST: [], // 當前產(chǎn)業(yè)環(huán)節(jié)CURRENT_AREA: [], // 當前所在地區(qū)INDUSTRY_TAGS_LIST: [], // 當前產(chǎn)業(yè)標簽列表COMPONAY_NAME: '', // 企業(yè)名稱CURRENT_COMMODITY: '', // 當前貨種IS_CUSTOMER: '', // 是否我行客戶};}

常規(guī)的一個表單查詢 重置方法自然這樣 不過我們可以在上面做些改進

代碼優(yōu)化

代碼改進一 調(diào)用 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();}

代碼改進二 調(diào)用 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);