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元素操做問題。