在使用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 }