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 相关文章推荐
JQuery 学习技巧总结
May 21 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 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个人网站架设连环讲(四)
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP实现下载功能的代码
2012/09/29 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
js判断浏览器的比较全的代码
2007/02/13 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
django和vue实现数据交互的方法
2019/08/21 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
会议活动邀请函
2014/01/27 职场文书
安卓程序员求职信
2014/02/28 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
师范类求职信
2014/06/21 职场文书
事业单位考察材料范文
2014/12/25 职场文书
鸟的天堂导游词
2015/01/31 职场文书
中秋节随笔
2015/08/15 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
python小型的音频操作库mp3Play
2022/04/24 Python