在使用Element UI的el-tree组件时,获取节点路径是一个常见的需求。虽然Element UI的官方文档没有直接提供一个用于获取节点路径的API,但我们可以通过递归查找或利用组件事件来构造节点路径。以下是详细的解决方案: 1. 递归查找方法 通过递归遍历树结构,我们可以找到从根节点到目标节点的路径。 javascript function getNode...
*@paramdata- 传递给 data 属性的数组中该节点所对应的对象 */nodeClick(data){console.log(data)if(data.type==='user'){// 筛选出已经选中的子节点的id集合consttreeCheckedNodeIds=[...newSet(this.$refs.tree.getCheckedNodes().filter(_item=>!_item.child).map(item=>item.id))]// 获取当前节...
</el-tree> </template> exportdefault{ data() {return{ data: [] }; }, methods: { handleNodeClick(data) { const node=this.$refs.tree.getNode(data); const parentNode=node.parent;if(parentNode.data) { console.log("父节点"); } } } };...
首先通过$refs来获取当前节点,然后通过循环遍历$parent属性,直到顶级父节点为止。这里使用了 while 循环来进行多次遍历,每一次都将parentNode属性指向当前节点的父节点,直到找到level属性为 1,即根节点。 最后输出顶级父节点的 label 属性。需要注意的是,如果当前节点本身就是根节点,那么顶级父节点就是它自己。
}//继续获取父级节点的父级节点parentNode =parentNode.parent }if(this.nodeParentAll.length > 1) {//如果集合长度>1 则将数组进行倒叙.reverse() 其是就是将所有节点按照 从 顶级节点 依次往下排this.nodeParentAll.reverse() } } }, 大概记录下...备用...
使用el-tree来展示权限树结构信息,然后把所有选中的节点都传给后端,后端查询数据时出现一个问题,如果选中的是根节点,前端就会把整棵树的数据都传给后端,后端sql执行性能差。 后端提出要求,如果子节点都选中了,就不要传子节点了,只要把父节点的信息传出去。element-ui文档没有现成的方法。只能自己实现,代码如下: ...
在elementUI中el-tree获取字节点id以及父节点id(包括非全选中的情况) dom结构如下: <el-form-item label="权限" prop="menuIds"> <el-tree ref="tree" :data="permitData" show-checkbox node-key="id" @check="checkPermit" default-expanded-all :default...
<!-- 节点树 --> <el-tree :data="positionData" :props="defaultProps" ref="tree" accordion @node-click="submitForm" style="overflow-x: auto;overflow-y: auto;" ></el-tree> tree数据 data(){ return{ positionData: [ { id: "1", ...
在使用el-tree时,在created时使用getNode尝试获取节点 constnode=this.$refs.materialTree.getNode(id) 打印发现获取不到,猜测是treeData还没加载出来,在getNode前打印treeData console.log(JSON.parse(JSON.stringify(this.treeData)))constnode=this.$refs.materialTree.getNode(id) ...
获取el-tree中所有节点的父节点 <el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> import { throttle } from 'lodash' export default { data() { return { data: [ { label: '一级 1', value: ...