需求:
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>