如何让element-ui的dialog每次显示的时候做一次初始化

Question

dialog中有个<my-form :action="action">子组件，新增和编辑都会使用该组件，区别是传入的action分别是add和edit，现在遇到的问题是完成一次新增/编辑操作之后再次打开dialog的时候，表单中还残留着上一次填写的数据，有没有办法在dialog每次显示的时候根据action做一次“初始化”来清空一下data？

PS：如果不用dialog而是用路由，我是在每次进入路由的时候根据action做初始化的，dialog这不知该如何处理了，因为dialog始终都存在只是显示和隐藏，created、mounted等事件都无法保证在每次显示的时候触发。有人说在保存之后触发一个回调事件，可是也有可能填写表单之后不保存直接关闭对话框呀。这个需求在以往的函数式开发框架中是特别简单自然的事情，到了vue等数据驱动框架这却发现颇费脑筋，是我的思路不对吗？

Answer 1

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"

在dialog上面添加v-if='dialogVisible'

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  v-if='dialogVisible'

这样就初始化了

Answer 2

关闭dialog框的时候清空就可以了。

@close="loginDialog=false,resetForm('loginForm')" 

resetForm(formName) {
  this.$refs[formName].resetFields();
}

上面的代码是我在elementUI上的做法。

Answer 3

打开模态框, 需要异步清除或者替换模态框的数据:
this.$nextTick(() => { //等待dom同步后打开模态框
this.$refs['ruleForm'].resetFields(); //重置,清楚之前的错误或正确提示
模态框的formData = 列表rowData; //eidt 如果是add rowData = {};
});
知识点: 模态框的异步加载,需要待dom加载完成后,获取和填充数据.

Answer 4

虽然新建和编辑都使用同一模态框，按正常逻辑，新建所有内容都应该清空，可以使用el-form的resetFields方法，而编辑内容应该是需要将原始内容进行回显的，这个时候要将form表单各项内容进行回显即可。给form表单中的各个元素均双向绑定一个数据，如选择add那么将内容清空，如edit则将内容回显

Answer 5

在子组件中监听父级传过来的值

watch: {
    editId: function(newValue, oldValue) {
        console.log(oldValue) // 旧的值
        console.log(newValue) // 新的值
    }
}

Answer 6

1. 父组件通过prop向子组件传值(设为resource),子组件的渲染用v-if做判断;
2. 在父组件data中设置一个resource的深拷贝(设为duplicateRes),父组件直接传给子组件这份拷贝
3. 子组件在关闭时抛出一个'close'事件,父组件在handleClose()中修改duplicateRes的v-if的判断关键字。

如此一来，当你再次打开子组件的时候,v-if的判读关键字与上次相比发生了改变,所以会触发初始化。

最近恰好遇到了这个问题,这是我的解决方案,希望能有所帮助～

Answer 7

我的dialog是写在子组件中的，父组件去引用，子组件的数据也是在子组件的created中去发请求的。我V-if想写在子组件中el-dialog元素和子组件的外层根div和子组件的template元素上去判断显示隐藏 都没有办法去控制初始化渲染，请问这个我怎么做呢？我这个v-if不想定义在父组件的组件元素上使用。
我使用得方法是watch监听，在父组件中初始化一个标识，在打开弹框dialog事件中this.标识等于一个new Date(),在子组件中监听这个标识，也就是

watch: {
  editId: function(newValue, oldValue) {
      console.log(oldValue) // 旧的值
      console.log(newValue) // 新的值
  }
}

在这里发起数据请求，打开的时候时间每次都不同，监听到后就会发送请求，渲染页面了

Answer 8

因为第一次打开dialog时，清空和新建表单对象同时进行，所以这个时候是获取不到表单对象的，可以用nextTick方法进行表单清空。

this.visible=true    //dialog的visible
this.$nextTick(() => {
    this.$refs[formName].resetFields()  
})

Answer 9

问题解决了吗？我也遇到这个问题了，求告知

Answer 10

哪位大佬可以解释一下为什么编辑之后再点击创建编辑的数据还是会回显