方式一：全局监听
<el-tree
:data="imageList"
:props="imageListTreeProps"
@node-click="handleNodeClick"
node-key="url"
ref="imageListTree"
:default-expand-all="true"
show-checkbox>
</el-tree> mounted() {
let this_ = this
document.onkeydown = function(e) {
let key = window.event.keyCode;
let currentNode = this_.$refs.imageListTree.getCurrentNode()
let data = this_.imageList
if (key == 38) {
let preNode;
for(let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].children.length; j++) {
if (currentNode == data[i].children[j]) {
let idx = j - 1 > 0 ? j-1 : 0;
preNode = data[i].children[idx]
break;
}
}
}
this_.$refs.imageListTree.setCurrentNode(preNode)
let srcI = '/gen/gentable/imageShow/' + preNode.url
let nameI = preNode.name
this_.showImageOfPdf(srcI, nameI)
}
if (key == 40) {
let nextNode;
for(let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].children.length; j++) {
if (currentNode == data[i].children[j]) {
let idx = j + 1 < data[i].children.length ? j + 1 : data[i].children.length - 1;
nextNode = data[i].children[idx]
break;
}
}
}
this_.$refs.imageListTree.setCurrentNode(nextNode)
let srcI = '/gen/gentable/imageShow/' + nextNode.url
let nameI = nextNode.name
this_.showImageOfPdf(srcI, nameI)
}
};
},方式二：
<el-tree
:data="imageList"
:props="imageListTreeProps"
@node-click="handleNodeClick"
:highlight-current="true"
node-key="url"
ref="imageListTree"
:default-expand-all="true"
@keydown.down.native="keyDownClick" //注册事件
@keydown.up.native="keyUpClick" //注册事件
show-checkbox>
</el-tree> methods: {
keyDownClick(e) {
console.log("keyDown", e)
},
keyUpClick(e) {
console.log("keyDown", e)
}
}