vue 重置表单方法：this.$refs[formName].resetFields() 无效

在ui-element 上的说明用this.$refs[formName].resetFields() 可以重置表单，试过了几次才发现要只用这种方式重置表单必须要在表单标签中加入prop 和required 属性，通过这种方式重置才有效果。

下面是通过console打印出来的内容：

console.log( this.$refs[formName].resetFields)

 

加上required 和prop 后是可以重置了，但是，又会在标签前面显示 * 必填的标识，好吧，有点无语，我想重置的是搜索框，又不需要必填。没办法只能在百度看看，

后面找到了两个方法，也可以实现重置功能。

Object.assign(this.$data, this.$options.data())

Object.assign(this.$data.formSearch, this.$options.data().formSearch)

两个都试了一下，效果很理想。

                <el-form-item label="用例状态">
                    <el-select v-model="formSearch.status" placeholder="用例状态" style="width:100px">
                    <el-option label="通过" value="pass"></el-option>
                    <el-option label="失败" value="fail"></el-option>
                    <el-option label="未执行" value="not-start"></el-option>
                    <el-option label="跳过" value="skip"></el-option>
                    <el-option label="无效" value="invalid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch('formSearch')">查询</el-button>
                    <el-button  @click="resetForm('formSearch')">重置</el-button>
                </el-form-item>

      resetForm(formName){
        console.log( this.$refs[formName].resetFields)
        // Object.assign(this.$data, this.$options.data())
        Object.assign(this.$data.formSearch, this.$options.data().formSearch)
      }

 

标签：vue,resetFields,refs,重置,Object,data,assign,formName
来源： https://www.cnblogs.com/JcHome/p/16519317.html