vue elementUI tree树形控件获取父节点ID的实例


Posted in Javascript onSeptember 12, 2018

首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules

D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js

找到getCheckedNodes该方法 细节如下我的该方法在21618行

TreeStore.prototype.getCheckedNodes = function getCheckedNodes() {
 var leafOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
 var checkedNodes = [];
 var traverse = function traverse(node) {
  var childNodes = node.root ? node.root.childNodes : node.childNodes;
 
  childNodes.forEach(function (child) {
  if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
   checkedNodes.push(child.data);
  }
 
  traverse(child);
  });
 };
 traverse(this);
 return checkedNodes;
 };

修改 其中的if判断

TreeStore.prototype.getCheckedNodes = function getCheckedNodes() {
 var leafOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
 var checkedNodes = [];
 var traverse = function traverse(node) {
  var childNodes = node.root ? node.root.childNodes : node.childNodes;
 
  childNodes.forEach(function (child) {
  if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
   checkedNodes.push(child.data);
  }
  traverse(child);
  });
 };
 
 traverse(this);
 
 return checkedNodes;
 };

然后重启项目

console.log(this.$refs.tree.getCheckedKeys());就可以拿到父节点的ID啦

以上这篇vue elementUI tree树形控件获取父节点ID的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
window.open()实现post传递参数
Mar 12 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
You might like
用 JSON 处理缓存
2007/04/27 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python中的集合类型知识讲解
2015/08/19 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python内存管理机制原理详解
2019/08/12 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Django choices下拉列表绑定实例
2020/03/13 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
搞笑创意广告语
2014/03/17 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
详解SQL的窗口函数
2022/04/21 Oracle
Spring Boot实现文件上传下载
2022/08/14 Java/Android