<!-- 选择树上下切换 -->
<template>
<div>
<el-tree
:data="treeData"
:props="defaultProps"
node-key = "id"
ref="tree"
@node-click="handleNodeClick"
></el-tree>
<div>
<el-button @click="goUp">Go Up</el-button>
<el-button @click="goDown">Go Down</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '根节点1-ID1',
children: [
{
id: 4,
label: '子节点1-1-ID4',
children: [
{
id: 9,
label: '孙节点1-1-1-ID9'
},
{
id: 10,
label: '孙节点1-1-2-ID10'
}
]
},
{
id: 5,
label: '子节点1-2-ID5'
}
]
},
{
id: 2,
label: '根节点2-ID2',
children: [
{
id: 6,
label: '子节点2-1-ID6'
},
{
id: 7,
label: '子节点2-2-ID7',
children: [
{
id: 11,
label: '孙节点2-2-1-ID11'
}
]
}
]
},
{
id: 3,
label: '根节点3-ID3'
}
],
defaultProps: {
children: 'children',
label: 'label'
},
currentNode: null // 当前选中的节点
};
},
methods: {
handleNodeClick(data, node) {
console.log("------节点被点击了------");
this.currentNode = node;
},
goUp() {
debugger
let currentNode = this.currentNode;
console.log("当前节点:"+ currentNode.data.id + "---" + currentNode.data.label)
if (!currentNode) return;
// 如果当前节点有兄弟节点,则选择上一个兄弟节点
const prevSibling = this.findPrevSibling(currentNode);
if (prevSibling) {
this.currentNode = prevSibling;
this.$refs.tree.setCurrentKey(this.currentNode.data.id);
this.handleNodeClick(this.currentNode.data,this.currentNode);
return;
}
// 如果当前节点没有兄弟节点,则向上走到父节点
let parentNode = currentNode.parent;
while (parentNode){
if(parentNode){
//存在父级节点,同时判断当前节点是不是父级节点的第一个儿子节点,如果是当前节点不变;
if(parentNode.level != 0){
//存在父节点则选中父节点
this.currentNode = parentNode;
this.$refs.tree.setCurrentKey(this.currentNode.data.id);
this.handleNodeClick(this.currentNode.data,this.currentNode);
return;
}else {
//已达到根节点,不需要改变当前节点
return;
}
}else{
//不存在父节点,继续向上走到父节点的父节点
currentNode = parentNode;
parentNode = currentNode.parent;
}
}
// 如果到达根节点还没有找到兄弟节点,则重置当前节点为 null
// this.currentNode = null;
},
goDown() {
const node = this.currentNode;
const firstSonNode = this.findFirstSonNode(node);
if(firstSonNode){
// console.log("------找到了第一个儿子节点------");
//选中
this.toCheckNode(firstSonNode);
}else {
//没有儿子找下一个兄弟
const nextBrotherNode = this.findNextBrotherNode(node);
// console.log("------找下一个兄弟节点------");
if(node.level == 1 && !nextBrotherNode){
console.log("------没找到下一个兄弟节点,现在不找了------");
return;
}
if(nextBrotherNode){
//找到的下一个兄弟节点
this.toCheckNode(nextBrotherNode);
}else{
//找父亲的下一个兄弟
const nextParentNode = this.findNextParentNode(node);
if(nextParentNode){
this.toCheckNode(nextParentNode);
}
}
}
},
// 辅助方法:找到给定节点的上一个兄弟节点
findPrevSibling(node) {
const parentNode = node.parent;
console.log(node.data.id + "---父节点:" + parentNode);
if (!parentNode) return null;
const index = node.parent.childNodes.indexOf(node);
if (index > 0) {
return node.parent.childNodes[index - 1];
}
return null;
},
// 辅助方法:找到给定节点的下一个兄弟节点
findNextBrotherNode(node) {
const parentNode = node.parent;
if (!parentNode) return null;
const index = node.parent.childNodes.indexOf(node);
if (index < node.parent.childNodes.length - 1) {
return node.parent.childNodes[index + 1];
}
return null;
},
// 辅助方法:找到给定节点的第一个子节点
findFirstSonNode(node) {
const childNodes = node.childNodes;
if (!childNodes) return null;
if(childNodes.length > 0){
if(childNodes[0].childNodes.length > 0){
return this.findFirstSonNode(childNodes[0]);
}
return childNodes[0];
}
return null;
},
// 辅助方法:找到给定节点的下一个父亲节点
findNextParentNode(node) {
const parentNode = node.parent;
// console.log("当前找下一个父亲节点:"+ parentNode.data.label);
if (!parentNode) return null;
if (!parentNode.parent) return null;
const index = parentNode.parent.childNodes.indexOf(parentNode);
if (index < parentNode.parent.childNodes.length - 1) {
return parentNode.parent.childNodes[index + 1];
}
return this.findNextParentNode(parentNode);
},
//辅助方法,选中节点
toCheckNode(node){
this.currentNode = node;
this.$refs.tree.setCurrentKey(this.currentNode.data.id);
this.handleNodeClick(this.currentNode.data,this.currentNode);
}
}
};
</script>
具体效果如下:
以上代码供大家参考。