Vue dialog弹框配合tree树形组件 出现'setCheckedKeys' of undefined 问题

2019独角兽企业重金招聘Python工程师标准>>>

因为默认页打开是这样的

新增模块按钮是弹框，里面是这样一个树形组件

由于我想要在加载页面的时候就把里面数据加载，且将已选中的给默认钩上

截图一部分代码如下:

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);
	});
},

完成！

因为我这里默认不需要打开弹框所以多了一点步骤，如果直接显示的可以将弹框执行的代码放到回调里面即可。

转载于:https://my.oschina.net/u/2443771/blog/2252644