键盘控制ElementPlus树形控件展开收起选中功能

需求：

1、当树形控件获取焦点后，可通过键盘上下键来选中节点

2、当存在子节点时，键盘左键展开树，键盘右键收起树。

注意：

通过上下键来选中数据节点时，只有canFocus为true的节点才能被选中

    /**
     * 移动键盘上下键，切换树节点选中项(不执行树的点击事件)
     * @param event 原生时间
     * @param treeRef 树组件的ref
     */
    function treeKeyVerticalDef(event: any, treeRef: any) {
      let dataKey = event.target.getAttribute('data-key');
      if (dataKey && dataKey !== '') {
        treeRef.value!.setCurrentKey(dataKey, true);
      }
    }
    /**
     * 键盘左方向键展开节点
     * @param event 原生事件
     * @param treeRef 树组件的ref
     */
    function treeKeyOpen(event: any, treeRef: any){
      let dataKey = event.target.getAttribute('data-key');
      if (dataKey && dataKey !== '') {
        let curNode: any = treeRef.value!.getNode(dataKey);
        let curNodeData = treeRef.value!.getCurrentNode();
        curNode!.expanded = true;
        if (curNodeData && curNodeData.children.length > 0) {
          setTreeNodeFocus(curNodeData.children, treeRef);
        }
      }
    }
    /**
     * 将展开节点所有子节点的canFocus置为true
     * 将展开状态的子节点的canFocus置为true，未展开的为false
     * @param treeData
     * @param treeRef
     */
    function setTreeNodeFocus(treeData: any[], treeRef: any) {
      if (treeData && treeData.length > 0) {
        treeData.forEach((treeNode: any) => {
          let node: any = treeRef.value!.getNode(treeNode.nodeId); // 获取Node
          node!.canFocus = true;
          if (node && node.data && node.data.children && node.data.children.length > 0) {
            let nodeData: any = node.data; // 获取数据
            if (nodeData && nodeData.children && nodeData.children.length > 0 && node.expanded) {
              setTreeNodeFocus(nodeData.children, treeRef);
            }
          }
        })
      }
    }
    /**
     * 键盘左方向键折叠节点
     * @param event 原生事件
     * @param treeRef 树组件的ref
     */
    function treeKeyClose(event: any, treeRef: any){
      let dataKey = event.target.getAttribute('data-key');
      if (dataKey && dataKey !== '') {
        let curNode: any = treeRef.value!.getNode(dataKey);
        curNode!.expanded = false;
        let curNodeData = treeRef.value!.getCurrentNode();
        if (curNodeData && curNodeData.children.length > 0) {
          setTreeNodeNotFocus(curNodeData.children, treeRef);
        }
      }
    }
    /**
     * 将收起节点所有子节点的canFocus置为false
     * @param treeData 子节点数组
     * @param treeRef 树组件的ref
     */
    function setTreeNodeNotFocus(treeData: any[], treeRef: any) {
      if (treeData && treeData.length > 0) {
        treeData.forEach((treeNode: any) => {
          let node: any = treeRef.value!.getNode(treeNode.nodeId); // 获取Node
          node!.canFocus = false;
          if (node && node.data && node.data.children && node.data.children.length > 0) {
            let nodeData: any = node.data; // 获取数据
            if (nodeData && nodeData.children && nodeData.children.length > 0) {
              setTreeNodeNotFocus(nodeData.children, treeRef);
            }
          }
        })
      }
    }

<el-tree
  ref="treeRef"
  node-key="nodeId"
  :data="treeData"
  @node-click="handleNodeClick"
  :expand-on-click-node="false"
  highlight-current
  @keyup.up="treeKeyVertical"
  @keyup.down="treeKeyVertical"
  @keyup.left="treeKeyOpen"
  @keyup.right="treeKeyClose"
>
  <template #default="{ node }">
    <span :title="node.label" class="tree-label">{{ node.label }}</span>
  </template>
</el-tree>