饿了么组件tree单击控制树节点展开与收起,双击不影响单击事件并且不控制节点的展开与收起

85 阅读1分钟

饿了么组件tree单击控制树节点展开与收起,双击不影响单击事件并且不控制节点的展开与收起

handleNodeClick(data, node, event){
  this.treeClickCount ++;
  if(this.treeClickCount > 2) return;
  // 解决单击与双击的冲突
  var timer = setTimeout(() => {
    if(this.treeClickCount == 1){
      this.treeClickCount = 0;
      if(!node.expanded){
        // 展开
        // 刷新树
        this.refreshNode(node.key)
      }else{
        // 收起
        node.expanded = false;
      }
    }else if(this.treeClickCount > 1){
      // 双击
    }
  })
}, 
// 刷新某个树节点,重点!!!!
refreshNode(key, val) {
  // 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
  let node = this.$refs.treeNode.getNode(key);
  if (node !== undefined && node !== null) {
    //  设置未进行懒加载状态
    node.loaded = false;
    // 重新展开节点就会间接重新触发load达到刷新效果
    node.expand();
  }
},