vue-treeselect及el-tree点击节点获取上级节点的数据方式
作者：花椒和蕊
这篇文章主要介绍了vue-treeselect及el-tree点击节点获取上级节点的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue-treeselect及el-tree点击节点获取上级节点的数据
el-tree，单击和右击都有一个参数，即节点对应的Node
打印这个Node，如下：
@node-contextmenu="rightClick"
// 节点右击事件 */
rightClick(MouseEvent, object, Node, element) {
console.log(Node, "Node");
},
展开parent
这个parent就是父节点，父节点中还包含了它自己的父节点，如果无父节点，返回null
el-tree获取父节点还是挺简单的，树组件内部已经返给你了，直接获取就行
vue-treeselect获取父节点
文档中未找到直接获取的方法，我这里说一下自己实现的方式
@select="(node) => treeHandleSelect(node)"
treeHandleSelect(node, e) {
// 获取节点上一节点
//this.expendTree树数据源，node.pid当前节点的父id，this.dealPartytree处理数据的方法
const obj = this.dealPartytree(this.expendTree, node.pid);
//obj就是处理完后返的父节点，然后直接拿自己需要的东西即可
this.partymember.branch = obj.name;
this.partymember.branchId = obj.id;
},把树数据源，节点的父id传进来
// 获取节点上一节点
dealPartytree(arr, id) {
let obj = {};
const dep = (data, nodeId) => {
//循环树数据源，用当前项的id和父id对比，相同就赋值，不相同就递归，相当于遍历了整棵树
for (let v = 0; v < data.length; v++) {
if (data[v].id === nodeId) {
obj = data[v];
} else if (data[v].children) {
dep(data[v].children, nodeId);
}
}
return obj;
};
obj = dep(arr, id);
return obj;
},//用当前项的id和父id对比是因为，当前项的父id即父节点的id，通过父节点的id进行关联
vue-treeselect无法点击问题（点击无法出现拉下菜单）
问题原因
样式冲突（使用了elementui）
场景
在el-form标签中，如果使用了标签，并且父标签不是的话，就会出现无法点击的问题。（没有严格按elementui的标签嵌套）
可正常点击：
<el-row> <el-col :span="24" v-if="form.parentId !== 0"> <el-form-item label="上级字典" prop="parentId"> <treeselect v-model="parentId" :options="dictOptions" /> </el-form-item> </el-col> </el-row>
不能正常点击：
<el-col :span="24" > <el-form-item label="上级字典" prop="parentId"> <treeselect v-model="parentId" :options="dictOptions" /> </el-form-item> </el-col>
其他场景下，应该也是样式冲突的问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。