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

mjjkf
  • 5
新手上路,请多包涵

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

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

回复
阅读 42.1k
10 个回答
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"

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

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

这样就初始化了

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

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

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

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

王大大
  • 2
新手上路,请多包涵

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

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

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

watch: {
    editId: function(newValue, oldValue) {
        console.log(oldValue) // 旧的值
        console.log(newValue) // 新的值
    }
}
saifeiLee
  • 3
新手上路,请多包涵
  1. 父组件通过prop向子组件传值(设为resource),子组件的渲染用v-if做判断;
  2. 在父组件data中设置一个resource的深拷贝(设为duplicateRes),父组件直接传给子组件这份拷贝
  3. 子组件在关闭时抛出一个'close'事件,父组件在handleClose()中修改duplicateRes的v-if的判断关键字。

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

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

lipengfei1993
  • 2
新手上路,请多包涵

我的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) // 新的值
  }
}

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

Trio
  • 2
新手上路,请多包涵

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

this.visible=true    //dialog的visible
this.$nextTick(() => {
    this.$refs[formName].resetFields()  
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏