Vue3+Element-Plus+el-dialog的关闭销毁元素

博客围绕Vue.js业务需求展开,指出dialog框关闭后数据残留影响试卷预览,试题生成按钮重复可用问题。尝试用destory-on-close和v-if清除数据未完全解决,后找到销毁dialog底层数据方法。还解决了销毁元素后表单验证的小bug,加上:destory-on-close=\true\属性避免未保存就验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

业务需求:

1、dialog框关闭后,数据会依然存在,这样会导致下一个题目的预览看不到实际题目,比如上一题预览到最后一题,直接关闭,但是由于没有清数据,所以再次打开下一套试卷的预览,会显示上一套试卷预览的最后一题。

 2、当我出完试卷预览过之后,会发现原来灰色的试题生成按钮又变成有颜色,又可以点击了,这样会导致用户重复生成试卷。

我想到的解决方法:找到官方文档,文档上写着可以用:destory-on-close,但是我发现就算写了也是没用的,数据根本清不掉,百度了一下说是一个坑,只能清掉表单里的数据。别的数据需要用v-if 来清除。我自己的想法是,就算使用v-if 清掉的也是试卷预览的数据并不能解决我的第二个问题,所以,我又百度了一下,让我找到了一篇直接销毁dialog底层数据的方法,这样就会直接把所有的dialog关掉并刷新页面。

具体实现代码:

<el-dialog v-model="examWinVisible" width="60%" height="1500px" :before-close="handleClose" draggable :close-on-click-modal="false" @close="closeDialog">
methods:{
 closeDialog() {
     Object.assign(this.$data, this.$options.data())
     this.GetTabData()
     //参考文献
     http.get("Exam/GetConsultList", {}).then(res => {
        if ((res.data || []).length > 0) {
             this.consults = [];
             res.data.forEach(item => {
                 this.consults.push({ id: item.id, name: item.name });
             });
          }
     });
  },
}

这里有个小bug,当我销毁元素后,重复:打开试卷预览后再打开新增/编辑 会出现还没保存就校验的情况

代码实现:在会出现表单验证的地方用上 :destory-on-close="true"

<el-dialog :title="`${addForm.type == 'add' ? '添加' : '编辑'}考试科目`" v-model="addWinVisible" width="45%" :before-close="handleClose" :center="false" draggable :close-on-click-modal="false" :destroy-on-close="true" @close="closeDialog">

加上这个属性后,再连续打开预览编辑就不会出现还未保存就验证的情况

最终效果:

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值