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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 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过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Django中几种重定向方法
2015/04/28 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python3多线程知识点总结
2019/09/26 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
公司授权委托书
2014/04/04 职场文书
学校食品安全责任书
2015/01/29 职场文书
年度考核表个人总结
2015/03/06 职场文书