vue+element項目中使用el-dialog彈出Tree控件報錯問題

1. 按正常的點擊按鈕,顯示dialog彈出的Tree控件,然后把該條數據下的已經選中的checkbox , 用setCheckedNodes或者setCheckedKeys方法選擇上 , 報下面這個錯的原因是出在setCheckedNodes(setCheckedKeys)方法這里 , 導致可以彈出Tree控件但是已選擇的checkbox沒有選中(點擊兩次就會選中 ~ ~)

 

 

vue.runtime.esm.js:567 [Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'setCheckedNodes' of undefined"

found in

---> <ElButton> at packages/button/src/button.vue
<ElTableBody>
<ElTable> at packages/table/src/table.vue
<ElTabPane> at packages/tabs/src/tab-pane.vue
<ElTabs> at packages/tabs/src/tabs.vue
<UserPermissions> at D:\git-project\p2p-manager\src\views\userPermissions\index.vue
<Conf> at D:\git-project\p2p-manager\src\views\conf\index.vue
<App> at D:\git-project\p2p-manager\src\app.vue
<Root>

2.錯誤原因是dom元素還沒有加載完，你就想使用 setCheckedKeys 設置目前勾選的節點。也就是你寫的this.$refs.tree.setCheckedKeys(list); 這個里面的 tree 還沒有加載出來。

3. 解決方法

        this.$nextTick官方解釋：將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

this.$nextTick(() => {
    this.$refs.tree.setCheckedKeys(list)
});