elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件

 muxiongxiong   2022-05-05 23:16   123 人阅读  0 条评论

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

现在是2022年5月5日22:48:21

今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。

图如下:

大致就是图上的意思。

实现思路

  1. 一开始我和同事想的是表单没有清空,于是我们就开始操作表单。比如点击添加按钮的时候,清空表单,发现不行;每天添加完之后,清空表单,发现不行;弹框的时候清空表单,发现还是不行!
  2. 接着想到了关闭框的时候销毁对象,查找官方文档,发现了个属性:destroy-on-close,文档中定义是:关闭时销毁 Dialog 中的元素boolean类型,默认是flase,于是我将值改成了true,发现还是不行。
  3. 从网上查了下,有人说用v-if,我加上了,还是不行~
  4. 后来同事用了个时间戳的方式,终于给解决了。

实现代码

本来我都给前端的朋友打电话了,问这个问题怎么解决,他给了我个方案,大致是el-dialog的显示时机和子组件的展示时机一样,这种方案没有试,不知道可行不可行,我们现在用的是下面这种写法:

在子组件的写如下代码:

    <el-dialog
      title="新 增"
      :visible.sync="addDeviceDialogVisible"
      :append-to-body="true"
      top="1vh"
      width="70%"
      @destroy-on-close="true"
    >
      <addDevice
        :key="timer"
        @addDeviceResult="addDeviceResult"
        @quxiaoClickResult="quxiaoClickResult"
      ></addDevice>

    </el-dialog>

注意:重点就是:key="timer",这个关键代码。

然后在显示此el-dialog对话框的时候,给timer日期赋值,代码如下:

     addDeviceBtn(){
      this.addDeviceDialogVisible = true;
      this.timer = new Date().getTime();
    },
    

bug完美解决,记录记录不迷路~

本文地址:http://xn--ypzn79ca.com/?id=1385
版权声明:本文为原创文章,版权归 muxiongxiong 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?