elementUI对话框ztree显示失败的问题记录

其实这个问题以前已经遇到过了，可是仍是在这里踩坑了。趁此机会整理一下，避免再犯。

问题描述

预期效果：弹出dialog对话框，对话框的内容是由ztree实现的树菜单。
实际效果：弹出dialog对话框，对话框内容空白，树菜单显示失败。

<template>
    <el-dialog title="树菜单" :visible.sync="dialogVisible">
        <div id="tree-menu" class="ztree"></div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false
        }
    },
    mounted() {
        let setting = {view: {showIcon: false}};
        let zNodes = [
            {id: "1", name: "nodes1"},
            {id: "2", name: "nodes2"}
        ];
        $.fn.zTree.init($("#tree-menu"), setting, zNodes);
    }
}
</script>

问题缘由

使用elementUI 1.4版本的时候就遇到过这个问题了，当时一直觉得是本身编码的错误，花了不少时间排查。后来控制台调试的时候发现，没有打开dialog以前是介个样子的：

第一次打开dialog以后：

基本就能明白，dialog的内容是懒渲染模式。在el-dialog__body未渲染以前是没法获取到其中的DOM元素进行操做的。

在elementui最新版本的文档中也有提示出来了：

问题解决

1. 根据文档提示“若是须要执行 DOM 操做，或经过 ref 获取相应组件，请在 open 事件回调中进行”。但其实在第一次打开dialog的open事件回调执行的时候，仍然没法执行DOM操做，由于这个时候dialog的内容仍是未渲染上去。可以使用Vue.$nextTick将DOM操做延迟到DOM更新以后执行。
2. 由于树菜单的逻辑较为复杂，可复用，因此直接提取成组件。在组件mounted的时候去获取DOM元素来作ztree的初始化操做，可避开dialog懒渲染带来的DOM元素操做问题。