使element-tree默认展开节点高亮

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()函数

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值