以下几点值得注意：
<FormItem>要加上prop属性，并且与你v-model的值相同才可以
FormItem中v-model的值在data要有初始值,因为form表单的重置是以第一次赋值的数据作为重置标准,所有如果没有初始值，则是以你第一次输入的值为准，那么你重置后当然还是你输入的值不会有变化。所以...要么你需要在data先初始化一下表单绑定的值（字段不多情况下我建议这么做，也是比较规范的），
方法1：（data先初始化表单绑定值）
<el-dialog :visible="dialogVisible" title="编辑" width="60%" center>
<el-form :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{
name:"",
phone:"",
address::"",
...
},
}
},
methods: {
showDialog(formName){
this.dialogVisible = !this.dialogVisible //隐藏和显示
this.$nextTick(()=>{
this.$refs[formName].resetFields();//清空表单
})
}
}
或者像下面这样在this.$refs[str].resetFields()执行前初始化：
<el-dialog :visible="dialogVisible" title="编辑" width="60%" center>
<el-form :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
methods: {
showDialog(formName){
this.dialogVisible = !this.dialogVisible //隐藏和显示
//初始化绑定数据
this.formData = {
name: '',
phone: ''
};
或者 字段多直接this.edit.form={}置空，表单如果有绑定v-model会帮你重新创建这些对象属性
this.$nextTick(()=>{
this.$refs[formName].resetFields();//清空表单
})
}
}
注：如果是这个重置过程是写在diaog打开事件或显示变量控制的时候，由于element模态框有懒加载，显示的过程DOM没有马上加载，有个异步过程，所以this.
nexTick来解决一下DOM延迟更新的问题（即等DOM更新后才去执行这个重置操作），然而关闭事件是可以获取到DOM的，可以直接使用this.$refs[formName].resetFields()
this.$nextTick(()=>{
console.log(this.$refs[formName])
this.$refs[formName].resetFields();//清空表单
})
方法二：
或者你也可以试试利用v-if的特性，打开模态框的同时进行form的销毁和重建，强行让每一次改操作拿到的数据为传说中的初始值。(网上有这种方法，我实验过是不行，添加表单数据后尽管进行form的销毁和重建但每次打开只要data有绑定数据还是会自动双向绑定上去，像下面这样只是能清除错误提示 orz......,)
<el-dialog :visible="dialogVisible" title="编辑" width="60%" center>
<el-form v-if="dialogVisible" :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
//显示、隐藏模态框
methods: {
//显示、隐藏模态框
showDialog(){
this.dialogVisible = !this.dialogVisible //隐藏和显示
}
}
所以......综上：既可以清除表单数据内容又可以清除错误提示的最简单的方法是以上两种方法结合起来：
<el-dialog :visible="dialogVisible" title="编辑" width="60%" center>
<el-form v-if="dialogVisible" :form="formData" >...<el-form>
</el-dialog>
data(){
return{
dialogVisible:false,
formData:{},
}
},
methods: {
//显示、隐藏模态框
showDialog(){
this.formData={}//清空表单数据
this.dialogVisible = !this.dialogVisible //隐藏和显示
}
}
补充，若使用的是element 的 Dialog 模态框，可以使用它自带的属性 destroy-on-close 设置为true即可，每次打开关闭模态框会自动清除上一次的状态，比较实用
注意以上几个问题应该ok了！
