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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
jquery text()要注意啦
Oct 30 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Vuex中的Mutations的具体使用方法
Jun 01 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操作JSON格式数据的实现代码
2011/12/24 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
Javascript的闭包
2009/12/31 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
学习python (1)
2006/10/31 Python
python 中文乱码问题深入分析
2011/03/13 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python机器学习之决策树分类详解
2017/12/20 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
会计毕业生自荐信
2013/11/21 职场文书
团组织关系介绍信
2014/01/12 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript