resetFields
这个方法是将表单重置为初始值, 也就是说,是将表单中的数据重置为dom节点渲染时的值,而不是重置为空对象。
也就是说,当你的表单数据,是在dom节点渲染前被赋值的,那么他的初始值就不为空了。
方法名 | 说明 |
---|---|
resetField | 对该表单项进行重置,将其值重置为初始值并移除校验 |
clearValidate | 移除该表单项的校验结果 |
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="楼层" prop="floor">
<el-input
v-model="queryParams.floor"
placeholder="请输入楼层"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属楼栋" prop="buildingId">
<el-select v-model="queryParams.buildingId" placeholder="请选择所属楼栋">
<el-option
v-for="item in buildingList"
:key="item.id"
:label="item.buildingName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="handleQuery" class="searchContBtnSty"
>搜索 <i class=" el-icon-search"></i></el-button>
<el-button icon="el-icon-refresh" class="default_canale" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
this.$refs.queryForm.resetFields()
- 使用
resetFields()
之前el-form
一定要加ref
属性 - 表单项
el-form-item
必须添加prop
属性,同时prop
属性值需与表单项的v-model
保持一致,哪怕你没有校验需求。 resetFields()
是将表单项重置为初始值,而这个初始值是在Vue mounted
时赋值上去的,如果在这之前对表单进行了赋值,则初始值会改变(例如created
时),那么后面调用resetFields()
则不会生效(不会是定义时的空值)。可以将赋值操作定义在this.$nextTick()
中(保证了初始值不被修改)。