Element树形控件使用过程中遇到的问题及解决方法

1.需求1点击编辑按钮，出现修改组织弹窗，且将点击时的组织名称返现在输入框中。 

思路是点击编辑按钮，取到节点点击时返回的data信息中的label进行赋值即可。

						
							{{ node.label }}
							
								
								
								
									
									
								
								
									
										
									
								
								
									
										
									
								
							
						
					

showEditOrganizationDialog() {
			this.editOrganizationDialogVisible = true
				this.organizationForm.organizationName = this.data.label
		},
getOrganizationList(data, node) {
			console.log('data', data)
			this.data = data  //获取到节点信息放到当前的data中		
		}

以为这样就可以了，刷新页面发现点第一次的时候输入框并不能回显出组织名称，换一个点击时回显的是上一个点击的组织名称。分析了一下肯定是data赋值没赋上，看一下控制台的输出

 

 确实没有赋值成功，然后看了一下这个输出顺序，以为是JavaScript按顺序执行的原因，调换了两个方法的位置，发现还是这个问题。我的解决办法就是，既然输出顺序一直都是showEditOrganizationDialog中的先输出，那就给它延迟，让它延迟输出这样赋值就能赋上了。修改后的代码

showEditOrganizationDialog() {
			this.editOrganizationDialogVisible = true
			setTimeout(() => {
				this.organizationForm.organizationName = this.data.label
				console.log(this.organizationForm.organizationName)
			}, 0)
		},

 

2.需求2点击最后的按钮进行组织的禁用启用。 

首先是根据node节点中isEnable字段判断是启用按钮还是禁用按钮，然后在进行切换。 很简单就是在点击确定的时候修改isEnable字段的值就可以。但就是这样我还是遇到了问题，就是点击第一次进行更改没问题，但是第二次的时候就会报错。

active() {
			this.data.isEnable = !this.data.isEnable
		},
deactive() {
			this.data.isEnable = !this.data.isEnable
		},

报错情况如下：

这个实例上没有这个方法，我找了一会明明有这个方法啊，为什么会报错呢。然后仔细看了一下代码，我的同事在用条件渲染的时候用的是v-if，当不满足的时候就会删除dom元素，所以第二次的时候根本没有这个dom元素，也就不存在这个方法了。修改方法不用v-if进行条件渲染，使用v-show进行条件渲染即可解决。

 

解决方法：