Element-ui中关闭dialog时隐藏组件并销毁

背景：今天在写Vue时遇到一个element-ui中懒加载树的问题， 由于tree的展示是在模态框中， 所以默认显示模态框加载lazyLoad方法没问额！但是关闭后你再次打开模块框时不会再去执行lazyLoad方法了， 这就有问题了。

<el-dialog
    title="添加"
    :visible.sync="addDialogVisible"
>
  <el-tree
    :props="props"
    :load="lazyLoad"
    lazy
    show-checkbox>
  </el-tree>
</el-dialog>

其实你已经想到了，就是隐藏dialog的时候要销毁这个dialog。 参看官网后发现给dialog加v-if，在关闭dialog的时候将v-if设置为false这样el-tree会直接将其从DOM结构中抹除，到此问题解决。

附上官网地址：https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

修改后代码：

<el-dialog
    title="新增帮助资料"
    :visible.sync="addDialogVisible"
    v-if="addDialogVisible"
>
  <el-tree
    :props="props"
    :load="lazyLoad"
    lazy
    show-checkbox>
  </el-tree>
</el-dialog>

来来来给我一分钱，我将给你更多优质博文～

完