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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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数据库抽象层 PDO
2011/05/07 PHP
PHP获取文件行数的方法
2015/06/10 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python通过socket查询whois的方法
2015/07/18 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
ktv筹备计划书
2014/05/03 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
商务宴会祝酒词
2015/08/11 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
python process模块的使用简介
2021/05/14 Python
python数字图像处理:图像的绘制
2022/06/28 Python
python如何将mat文件转为png
2022/07/15 Python