el-tree插槽，鼠标移入移出展开与关闭子节点

el-tree 插槽，鼠标移入移出展开与关闭子节点

// 结构
<el-tree :data="treeData" node-key="id" :props="defaultProps">
     <template #default="{ node, data }">
         <span class="custom-tree-node" @mouseleave="handleNodeLeave(data, node)"
                    @mouseover="handleNodeMenu(data, node)" :data-node-id="node.id">
                 {{ node.label }}
         </span>
      </template>
</el-tree>

@mouseleave="mouseleave(data, node)" 移入事件

@mouseover="handleNodeMenu(data, node)" 移出事件

:data-node-id="node.id" 自定义属性

// 逻辑
// 移入
const handleNodeMenu = (data: any, node: any) => {
  if (node.closeTimer) {
    clearTimeout(node.closeTimer)
    node.closeTimer = null
  }
  if (node.childNodes.length > 0 && !node.expanded) {
    node.expand() // 开启
  }
}
// 移出
const mouseleave = (data: any, node: any) => {
  node.closeTimer = setTimeout(() => {
    if (!checkHoverState(node)) {
      if (node.expanded) {
        node.collapse() // 关闭
      }
    }
  }, 150)
}
// 递归查询
const checkHoverState = (node: any) => {
  const checkChildren = (childNodes: any) => {
    return childNodes.some((child: any) => {
      const childEl = document.querySelector(`[data-node-id="${child.id}"]`)
      return childEl?.matches(':hover') || checkChildren(child.childNodes || [])
    })
  }
  return checkChildren(node.childNodes || [])
}

/**
  const currentNodeEl = document.querySelector(`[data-node-id="${node.id}"]`)
  if (currentNodeEl?.matches(':hover')) return true
**/