在使用el-tree(Element UI 的树形控件)时,获取父节点通常涉及对树形数据结构的遍历和查找。以下是一个详细的步骤说明,包括如何定义树形数据结构、查找目标节点以及获取其父节点。1. 确定el-tree组件中节点的数据结构 el-tree通常使用如下格式的数据结构:
</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("父节点"); } } } };...
使用node-click 事件,该事件会接收三个参数,分别是当前 data 节点数据,node 当前节点,root 根节点数据。 我们通过 node.parent.data 即可获取父节点数据,祖先级可一层层遍历上去 node.parent.parent 获取。 let parentData = node.parent.parent.data
<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: '1', children: [{ label: '二级 1-1', value: '1-1', children: [{...
这里本人要实现的是el-tree在选中菜单节点的时候,当部分选择子节点的时候进行保存到后端需要带上父级节点的id,而el-tree里面默认是开启父级关联的选择模式, 也就是el-tree官网里面的check-strictly这个属性,这个属性默认是false,表示选中父级的时候会默认选择所有的子级,取消父级的同时也会取消所有的子级菜单选项,...
el-tree中获取选中节点的所有⽗级节点 需求：项⽬中需要⼀个产品⽬录树形图，点击树形节点时，会把当前选中节点的所有⽗级节点信息带到左侧的搜索框中 解决⽅法：使⽤node-click事件函数 // 点击节点 nodeClick(e) { const { tree } = this.$refs;// 选中节点的所有⽗级id和codeItem信息 this...
在使用el-tree组件展示权限树结构信息时，遇到一个需求：若用户全选了子节点，仅需将父节点信息传给后端，避免全树数据传输导致后端SQL执行性能问题。原生element-ui文档未提供直接解决方法，需自行实现解决。通过`getSimpleCheckedNodes`函数，可解决此问题。该函数接收一个`store`参数，即组件引用的存储实例...
在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...
后端提出要求,如果子节点都选中了,就不要传子节点了,只要把父节点的信息传出去。element-ui文档没有现成的方法。只能自己实现,代码如下: /** * 获取树结构已选节点:如果是父节点下子节点全选则只获取父节点 * @param {*} store === this.$refs.tree.store * @returns */ getSimpleCheckedNodes(store) {...
// 输出顶级父节点 console.log(parentNode.label); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 首先通过$refs来获取当前节点,然后通过循环遍历$parent属性,直到顶级父节点为止。这里使用了 while 循环来进行多次遍历,每一次都将parentNode属性指向当前节点的父节点,直到找到level属性为 1,即根节点。