Vue dialog彈框配合tree樹形組件 出現'setCheckedKeys' of undefined 問題

由於默認頁打開是這樣的

新增模塊按鈕是彈框，裏面是這樣一個樹形組件

因爲我想要在加載頁面的時候就把裏面數據加載，且將已選中的給默認鉤上

截圖一部分代碼以下:

init(id) {
  this.$request.get(this.$interface.PRODUCT_EDIT, {
    spm: this.spm,
    token: this.token,
    id: id,
  }, (response) => {
    this.userInfo = response.data
    this.moduleData = response.data.modules
	//本想直接將查詢出來的數組id給check上
    this.$refs.tree2.setCheckedKeys(response.data.select_modules)
  }, this.failure)
},

而後就出現瞭如下錯誤

緣由是：樹尚未加載完成，因此獲取不到。

解決方法: 先將須要勾選的數據存到變量裏面

this.select_modules = response.data.select_modules

而後給點擊直接「新增模塊」 按鈕增長點擊事件，賦值勾選值

addDialog(){
	//打開彈框
	this.dialogFormVisible = true;
	//加載勾選數據
	this.$nextTick(() => {
		this.$refs.tree2.setCheckedKeys(this.select_modules);
	});
},

完成！

由於我這裏默認不須要打開彈框因此多了一點步驟，若是直接顯示的能夠將彈框執行的代碼放到回調裏面便可。