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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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/03/13 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
详细分析python3的reduce函数
2017/12/05 Python
Python 解析xml文件的示例
2020/09/29 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
社区端午节活动方案
2014/01/28 职场文书
会计人员岗位职责
2014/03/19 职场文书
建材投资建议书
2014/05/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python