③. 表单重置问题(resetFields)
(对整个表单进行重置，将所有字段值重置为初始值并移除校验结果)
(以下三步都是必须的)
- ①. el-form添加ref
<el-form ref="refname"></el-form>
②. form的每个item加prop属性（踩了好久的坑这个,需要和绑定数据的最后名称一致，prop属性添加到form-item上） 关键
<el-form-item prop="name"> <el-input v-model="query.name"></el-input> </el-form-item>
③. element 中重置resetFields 函数 是恢复初始值 , 并非置空
<el-form-item> <el-button @click="resetForm('refname')">清空</el-button> </el-form-item>
④. 进行表单重置
方式一: restForm(refname) { this.$refs[refname].resetFields() } 方式二: resetForm(formName) { this.$nextTick(() => { this.$refs[formName].resetFields(); this[formName] = {}; }) } 方式三: resetForm(){ // resetFields需要获取到ref中的表单对象 this.$refs.queryFormRef.resetFields(); }
⑤. 代码演示：
(this.$refs[formName].resetFields( ) )
(this.$refs.queryFormRef.resetFields ( ) )
( this.$nextTick(( ) => { this.$refs[formName].resetFields( ); }))
<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { ruleForm: { pass: '', checkPass: '', age: '' }, }; }, methods: { //重置按钮 resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
④. 项目实战
- ①. 效果图
②. 代码展示：
(这里通常会放在header头部区域进行条件的查询,注意设置css样式)
<el-header class="query_params query_params_header"> <el-form :inline="true" :model="queryMap" ref="queryForm" target="exportIframe" method="post"> <div> <input ref="export_f_columns" name="columns" type="hidden"></input> <input ref="export_f_usertoken" name="usertoken" type="hidden"></input> <input ref="export_f_multipleSelection" name="multipleSelection" type="hidden"></input> <input ref="h_AREAS" name="AREAS" type="hidden"></input> <!--店代码 --> <el-form-item label="店代码" style="width:180px"> <el-input v-model="queryMap.ID" placeholder="店代码" name="ID" style="width:120px"></el-input> </el-form-item> <!--片区 --> <el-form-item label="片区" style="width:180px"> <label slot="label">片 区</label> <el-select v-model="queryMap.AREAS" multiple placeholder="请选择" style="width:90px" @change="selectAREAs"> <el-option key="华南" label="华南" value="华南"></el-option> <el-option key="华北" label="华北" value="华北"></el-option> <el-option key="西北" label="西北" value="西北"></el-option> <el-option key="华中" label="华中" value="华中"></el-option> <el-option key="西部" label="西部" value="西部"></el-option> <el-option key="东北" label="东北" value="东北"></el-option> </el-select> </el-form-item> <!--城市 --> <el-form-item label="城市" style="width:180px"> <el-input v-model="queryMap.CITY" placeholder="城市" name="CITY" style="width:120px"></el-input> </el-form-item> <!--是否SSI JDPower--> <el-form-item label="是否SSI JDPower" style="width:300px"> <el-select v-model="queryMap.CSIIMPSHOP" placeholder="请选择" style="width:120px" @change="selectAREAs"> <el-option key="是" label="是" value="0"></el-option> <el-option key="否" label="否" value="1"></el-option> </el-select> </el-form-item> </div> <div> <!--店名称 --> <el-form-item label="店名称" style="width:180px"> <el-input v-model="queryMap.SIMPLENAME" placeholder="店名称" name="ID" style="width:120px"></el-input> </el-form-item> <!--店状态 --> <el-form-item label="店状态" style="width:180px"> <el-select v-model="queryMap.ISDELETED" placeholder="请选择" style="width:90px" @change="selectAREAs"> <el-option key="营业中" label="营业中" value="n"></el-option> <el-option key="已关店" label="已关店" value="y"></el-option> </el-select> </el-form-item> <!--省份 --> <el-form-item label="省份" style="width:180px"> <el-input v-model="queryMap.PROVINCE" placeholder="省份" name="PROVINCE" style="width:120px"></el-input> </el-form-item> <!--建店规模 --> <el-form-item label="建店规模" > <el-input v-model="queryMap.SHOPSCALE" placeholder="建店规模" name="SHOPSCALE" style="width:90px"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small" icon="el-icon-search" @click="query">查询</el-button> <el-button type="success" size="small" icon="el-icon-caret-right" @click="exportExcel">导出</el-button> </el-form-item> </div> </el-form> </el-header>
.query_params_header{ height:auto !important; }
