el-tree设置默认选中节点

用途:

可以在初始化默认选中树组件,或者在页面跳转的时候同步上一次 选中的设备。

话不多说,上代码。

第一个页面:

在树组件的点击事件我们可以得到当前选中的设备的标识值,例如id

el-tree设置默认选中节点_第1张图片

然后由页面1跳转到页面2需要路由跳转,这时候就用路由传递参数。

el-tree设置默认选中节点_第2张图片 

 在页面2中接收传递的参数:

在页面2中定义一个字段并在在mouted中完成对传递参数的赋值:

el-tree设置默认选中节点_第3张图片

 

因为我们要在页面2中同步设置树组件选中的值,所以我们先要等页面2中树组件的数据加载出来。然后使用递归函数判断是不是树的最后一级,这个得和调接口的后端统一一下标识,接着就使用

el-tree设置默认选中节点_第4张图片 

this.$refs.treeDay.setCurrentKey(this.channelCode);

这里需要注意的是树组件绑定的node-key和setCurrentKey中的字段名字要一致。

这是获取树组件的数据:

el-tree设置默认选中节点_第5张图片

 这是递归树组件的数据,判断是不是最后一级:

el-tree设置默认选中节点_第6张图片

好的,结束!! 

你可能感兴趣的:(vue)