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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
threejs太阳光与阴影效果实例代码
Apr 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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
js 目录列举函数
2008/11/06 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jquery使用经验小结
2015/05/20 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
《雪地里的小画家》教学反思
2014/02/22 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
安全保证书怎么写
2015/02/28 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书