一般多选的树形组件,使用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. 使用mybatis的动态sql解析能力生成sql

    需求: 计算平台,有很多表,打算提供一个基于sql的服务接口, sql不能完全在配置页面写死, 要能根据参数不同执行不同的语义,防止sql个数爆炸 把mybatis原码down下来, 改造一下测试用例 ...

  2. MIAME|Highwire press

    生物信息学 GEO可存储基因芯片数据,支持MIAME.MIAME是minimum information about a microarry experiment.这之中存储研究原始数据+标准化之后的 ...

  3. Google的kaptcha验证码使用

    效果图: 官方地址:https://code.google.com/p/kaptcha/w/list 1.把下载的kaptcha-2.3.2.jar添加到lib中 2.配置web.xml增加servl ...

  4. unittest(11)- get_data自定义取某几条测试数据

    在get_data中定义取全部用例和取部分用例两种模式 # 1. http_request.py import requests class HttpRequest: def http_request ...

  5. TCP 的三次握手和四次挥手

    参考资料: 1.TCP的三次握手与四次挥手理解及面试题: 2.Http协议三次握手和四次挥手: 3.TCP通信的三次握手和四次撒手的详细流程(顿悟) 前置: 序号(也称序列号) - Sequence ...

  6. 机器学习入门教程-k-近邻

    k-近邻算法原理 像之前提到的那样,机器学习的一个要点就是分类,对于分类来说有许多不同的算法,所谓的物以聚类,分以群分.我们非常的清楚,一个地域的人群,不管在生活习惯,还是在习俗上都是非常相似的,也就 ...

  7. 2018年宜賓美酒文化節浮空投影舞美特效 / 2018 Yibing Wine Festival Visual Effect Projection

    客户 Client:五粮液集团 硬件 Hardware:PC,巴可投影机30,000流明*2  Barco projector 30,000 lumen*2 软件 Software:Resolume, ...

  8. 在C代码调用C++代码

    由于历史原因,以及不同开发人员的技术偏好,C语言和C++语言都有一些独有的非常有价值的项目,因而两种语言的互操作,充分利用前人造的轮子是一件非常有价值的事情. C++代码调用C代码很简单,只要分别在包 ...

  9. linux-深度学习环境配置-Centos

    下载Centos 7安装镜像,制作启动优盘. Install CentOS 7 安装CentOS 7. 第一步,配置日期.语言和键盘. 第二步,选择-系统-安装位置,进入磁盘分区界面.选择-其它存储选 ...

  10. C++扬帆远航——18(项目五2,递归式)

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:qiushi.cpp * 作者:常轩 * 微信公众号:World ...