一般多选的树形组件，使用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. CPU时间分片、多线程、并发和并行

    1.CPU时间分片.多线程? 如果线程数不多于CPU核心数,会把各个线程都分配一个核心,不需分片,而当线程数多于CPU核心数时才会分片. 2.并发和并行的区别 并发:当有多个线程在操作时,如果系统只有 ...

  2. reduced penetrance|COPE-PCG

    生物医学大数据 Case study 由Human genome project提出之后,提出的精准医学.它的初衷是将数据standard后easy应用,我国重要重在疾病预警和疗效评价. 在疾病预警上 ...

  3. Nginx笔记总结六:Nginx location配置

    语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...

  4. linux系统文件被删的几种恢复方法

    参考链接:https://www.cnblogs.com/276815076/p/5703796.html 1.几种恢复方法,这里只是记录别的博客提到的方法,本人并未亲自验证. ext3用ext3gr ...

  5. 安装NSQ

    安装文档 https://nsq.io/deployment/installing.html 打开连接后,根据系统找到对应的二进制包 一般都是linux则下载 https://s3.amazonaws ...

  6. MySQL增、删、改、查基础操作（C++）

    系统平台:Centos7 MySQL版本:5.7.19 连接MySQL数据库 MySQL::MySQL(string host, string user, string passwd, string ...

  7. Vue Zero · 啟

    其实,一开始我应聘的是Spark,Hadoop这样的,然后后面呢,发现只有Java的业务给我写了,再后面我发现,公司招不到前端,所以前端要由后端来写,刺激!!! 数据驱动 首先要明白一个概念,那就是D ...

  8. Java入门教程三(流程控制)

    概述 程序有 3 种结构:顺序结构.选择结构和循环结构.分别为:if elseswitch case,while与do while,for, foreach,return,break ,continu ...

  9. [dubbo 源码之 ]2. 服务消费方如何启动服务

    启动流程 消费者在启动之后,会通过ReferenceConfig#get()来生成远程调用代理类.在get方法中,会启动一系列调用函数,我们来一个个解析. 配置同样包含2种: XML <?xml ...

  10. react-native 使用leanclound消息推送

    iOS消息推送的基本流程 1.注册:为应用程序申请消息推送服务.此时你的设备会向APNs服务器发送注册请求.2. APNs服务器接受请求,并将deviceToken返给你设备上的应用程序 3.客户端应 ...