element-ui Dialog 对话框关闭清除缓存问题

天天向上的人生

于 2024-03-28 10:48:06 发布

阅读量433

点赞数 3

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/hudecun/article/details/137103962

版权

文章讲述了在Dialog中使用VueElementUIForm表单时，如何确保关闭后清除所有赋值，特别是当id不进行双向绑定时，可能会导致缓存问题。提供了解决方案，包括单独清除formData.id或为id添加隐藏的v-model绑定。

摘要由CSDN通过智能技术生成

Dialog中用了Form 表单，先点击编辑，会给form表单中的组件赋值，关闭后想要清除赋值

form表单给了相关的方法

有时候用了这个方法还是有些值没有清除干净，

这是因为它只会清除el-form-item标签中prop属性绑定的值，如果你的formData对象中有不是这里的值就不会清除

  <el-form-item label="名称" prop="title">
      <el-input v-model="formData.title"></el-input>
  </el-form-item>

一般我们的写法是构建一个formData对象，然后双向绑定form表单中input组件，关闭dialog时调用resetField方法，重置formData对象，但是id一般我们不会双向绑定到form表单的input中，这就导致了编辑和新增共用一个页面时出现缓存问题

formData = {
    id: '',
    title: '',
    name: '',
    type:'1'
  };

解决方法就是在关闭dialog时单独清除下id

formData.id = '';

或者

 <el-form-item v-show='false' label="id" prop="id">
   <el-input v-model="formData.id">id</el-input>
  </el-form-item>

关注