如何获取element树的当前节点同级的上一个节点和下一个节点
vue大概这样(未测试过)获取整棵树节点:
let data = this.$refs.tree._props.data;
然后把data和当前节点当做参数传递:
getBeforeNode(data,node){//获取同级前一个节点,data整棵树节点,node当前节点
for(let i=0;i<data.length;i++){
if(data[i].id == node.id){
if(i > 0){
return data[i-1];
}else{//没有前面一个节点
return null;
}
}else if(data[i].children){//有下级,递归查询
this.getBeforeNode(data[i].children,node);
}
}
},
getAfterNode(data,node){//获取同级后一个节点,data整棵树节点,node当前节点
for(let i=0;i<data.length;i++){
if(data[i].id == node.id){
if(i < (data.length - 1)){
return data[i+1];
}else{//没有后面一个节点
return null;
}
}else if(data[i].children){//有下级,递归查询
this.getAfterNode(data[i].children,node);
}
}
},
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
handleNodeClick(data, Node, component) {
let list = Node.parent.childNodes.map((item) => item.data);
let index = list.findIndex((item) => item.label == data.label);
console.log(list,index)
if (list[index - 1]) {
console.log("上一个结点:", list[index - 1]);
} else {
console.log("上一个结点:", "没有");
}
if (list[index + 1]) {
console.log("下一个结点:", list[index + 1]);
} else {
console.log("下一个结点:", "没有");
}
},
<el-tree
:data="rootData"
ref="rootTree"
show-checkbox
node-key="value"
@check="TreeCk"
default-expand-all>
</el-tree>
TreeCk (data, state) {
const curNode = this.$refs.rootTree.getNode(data)
console.log(curNode)
}