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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
基于axios封装fetch方法及调用实例
Feb 05 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 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 删除无限级目录与文件代码共享
2008/11/22 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
php命令行模式代码实例详解
2021/02/26 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
浅析javascript的return语句
2015/12/15 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
element-ui多文件上传的实现示例
2019/04/10 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技