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写的一个DIV 弹出网页对话框
Aug 14 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
小程序实现发表评论功能
Jul 06 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
了解前端理论:rscss和rsjs
May 23 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
一个查看session内容的函数
2006/10/09 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
jquery实现楼层滚动效果
2018/01/01 jQuery
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
jQuery实现消息弹出框效果
2019/12/10 jQuery
原生JavaScript实现换肤
2021/02/19 Javascript
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
django2笔记之路由path语法的实现
2019/07/17 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python操作redis数据库的三种方法
2020/09/10 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
入党自我评价优缺点
2014/01/25 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
高中班主任寄语
2019/06/21 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技