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

Daisy_ls

已于 2023-05-16 10:29:09 修改

阅读量7.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：工作中的问题 element Plus 文章标签： vue.js 前端 javascript

于 2023-02-23 14:05:57 首次发布

本文链接：https://blog.youkuaiyun.com/Daisy_ls/article/details/129167825

工作中的问题同时被 2 个专栏收录

16 篇文章

订阅专栏

element Plus

5 篇文章

订阅专栏

博客围绕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">

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

最终效果：