一般多选的树形组件，使用getCheckedNodes()方法只能获取到本级的菜单id，只有在子菜单全部选中的情况下才会选中上级。但我们想要不全选中子级的情况下也要获取它的上级，甚至上上级等，怎么办呢？

需要改一下node_modules中的源码：文件路径为node_modules\element-ui\lib\element-ui.comment.js

搜索文中的TreeStore.prototype.getCheckedNodes方法，改为：

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {

    checkedNodes.push(child.data)

}

就ok啦！

在代码里仍然是this.$refs.tree.getCheckedNodes()，这样使用。

element中的树形组件，如何获取父级菜单的id的更多相关文章

  1. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  2. Element-ui树形控件el-tree获取父级节点的id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  3. element ui el-tree回显问题及提交问题（当后台返回的el-tree相关数组的时候，子菜单未全部选中，但是只要父级菜单的id在数组中，那么他的子菜单为全部选中状态）

    1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...

  4. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  5. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  6. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  7. Vue 父组件主动获取子组件的值，子组件主动获取父组件的值

    父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...

  8. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  9. vue--子组件主动获取父组件的数据和方法

    子组件主动获取父组件的数据和方法 简单示例: this.$parent.数组 this.$parent.方法 示例: <template> <div id="Header& ...

随机推荐

  1. sqlserver多表联查分页

    select * from(select H_order.Id ,H_order.userID, ROW_NUMBER() over (order by H_order.Id Desc) as row ...

  2. 荼菜的iOS笔记--UIView的几个Block动画

    前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...

  3. quote|additives|Feel free to help| thick of |take in|soar|eternal|add up to|pull through| in reserve|

    A quote for a piece of work is the price that someone says they will charge you to do the work. Alwa ...

  4. python开发之Pandas

    正确的对DataFrame reverse运算 data.reindex(index=data.index[::-]) or simply: data.iloc[::-] will reverse y ...

  5. js中escape的用法

    escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符.   var s="http://local ...

  6. CIA Hive Beacon Infrastructure复现1——使用Apache mod_rewrite实现http流量分发

    0x00 前言 2017年11月9日维基解密公布一个代号为Vault8的文档,包含服务器远程控制工具Hive的源代码和开发文档.开发文档中的框架图显示Hive支持流量分发功能,若流量有效,转发至Hon ...

  7. POJ 3249 Test for Job(拓扑排序+dp优化空间)

    Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...

  8. 4-CSS规范

    4.1 命名规范:4.1.1 css文件命名 reset.css 重置样式,重置元素默认样式,使得页面在所有浏览器中有统一的外观 global.css 全局样式,全站公用,定义页面基础样式(常见的公共 ...

  9. flask_admin+flask_login 整合，jieba分词+echarts数据分析可视化

    项目地址: https://github.com/WES6/list

  10. uploadifive如何动态传参

    直接上代码 关键:$('#file_upload').data('uploadifive').settings.formData = { 'ID': 'ceshi'}; //动态更改formData的 ...