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获得网页窗口实际大小的示例代码
Sep 21 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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/11/12 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
JavaScript中number转换成string介绍
2014/12/31 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
如何用Django处理gzip数据流
2021/01/29 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
小学教师办公室制度
2014/02/03 职场文书
联谊会主持词
2014/03/26 职场文书
公司合作意向书
2014/04/01 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python实现拼音转换
2021/06/07 Python
Python语言中的数据类型-序列
2022/02/24 Python