后台管理项目 form表单中 使用input框查询 重置时 重置内容使用resetFields()清空输入内容常出现输入框中无法输入文字的bug 查询后发现resetFields()方法为将表单回到初始值而不是清空 并且包含顺序问题 因此还需要使用$nextTick 下面是我的解决参考方式
需要注意的是 不变的值依旧赋值上 然后在resetFields()前 将input框里的输入内容置空
<el-form
class="module-name-filter filter-form chunk"
:inline="true"
:model="query"
ref="filter"
size="mini"
label-position="left"
>
<div class="left">
<el-form-item label="标题/内容" class="form-group" prop="title">
<el-input
class="form-input"
v-model="query.title"
placeholder="请输入标题/内容"
clearable
></el-input>
</el-form-item>
</div>
<div class="right">
<el-button type="primary" @click="queryPage">查询</el-button>
<el-button @click="resetForm('filter')">重置</el-button>
</div>
</el-form>
resetForm(formName){
this.query = {
pageSize: 20, // 全局变量
pageIndex: 1,
title: '',
}
this.$nextTick(() => {
this.$refs[formName].resetFields()
this.getPageList();
})
},