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