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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
vue实现倒计时功能
Mar 24 Vue.js
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使用递归计算文件夹大小
2014/12/24 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
Jquery使用val方法读写value值
2015/05/18 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python实现telnet服务器的方法
2015/07/10 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
客服工作职责
2013/12/11 职场文书
高三历史教学反思
2014/01/09 职场文书
高三学习决心书
2014/03/11 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
护士年终考核评语
2014/12/31 职场文书
大学学生会辞职信
2015/05/13 职场文书
神秘岛读书笔记
2015/07/01 职场文书
投诉信格式范文
2015/07/02 职场文书