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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
js玩一玩WSH吧
2007/02/23 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
domReady的实现案例
2016/11/23 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python如何批量生成和调用变量
2020/11/21 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
小学教师师德演讲稿
2014/05/06 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android