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

柳经纶
2023-12-01

在使用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
}
 类似资料: