element-ui tree组件默认节点高亮问题:
Element-ui tree的官方文档中给我们提供了一个接口:
default-expanded-keys数组
我们可以将默认展开的节点的key放到数组中,就可以默认展开
但是有一个比较难受的问题是默认展开的节点没有渲染相应的样式(高亮)
在工程中,我tree组件绑定的data一共有两次刷新
第一次是在本地读取数据,将数据渲染出来
然后跟后台请求数据,如果两次数据不一致则改变页面的数据,这样能减少用户等待的时间
在使用官方提供的函数setCurrentKey()来设置高亮的时候我发现总是不起作用的
后来发现在服务器返回数据之前样式是起作用的
换句话说就是通过setCurrentKey()函数可以给相应的节点加上样式,但是要在data更新之后加上,否则data更新后就会被刷掉。因此网上有很多方法建议使用
this.$nextTick(function(){
this.$refs.vuetree.setCurrentKey(firstLeafCode); //"vuetree"是你自己在树形控件上设置的 ref="vuetree" 的名称
})
异步的方法加上样式,保证setCurrentKey()函数在data更新后调用
但是如果是像我这样有两次刷新的需求,则需要在服务器请求的数据到达之后再启动异步请求函数就可以给相应的节点加上高亮。如果this.$nextTick()函数不起作用,在万不得已的情况下可以考虑使用setTimeout()定时器来调用setCurrentKey()函数