element-ui tree组件解决点击node数据重复加载问题

在使用element-ui tree组件的时候可能会有点击某一个节点的时候要进行请求发送的情况,在多次点击相同节点的情况下会出现重复发送相同请求的情况。其实解决办法也比较简单,每点击一次node记录下当前node,再次点击的时候判断node是否是当前node,是的话就不进行请求发送,轻松解决重复加载相同数据的问题。附代码

在data中设置一个属性 currentNodeLabel

节点点击时的函数:

handleNodeClick(data) {

  console.log('Click node label is ' + data.label);
  // 判断点击的节点是否是当前的节点,是的话不进行任何操作
  if (this.currentNodeLabel == data.label) {
    console.log('This node is current')
  } else if (data.nodeType == 'needQuery') {  // 如果node有变化并且是需要加载数据的节点进行数据发送
    console.log('Select new node, query...')
    axios.....
  } else {  // 不进行任何操作,或者根据属性自动判断展开或者折叠
    console.log('Node fold')
  }
  // 记录当前的node,方便下次进行判断
  this.currentNodeLabel = data.label
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值