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的获取JS文件中的字符串内容
Feb 14 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JS实现标签页切换效果
May 04 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
浅析JavaScript 函数柯里化
Sep 08 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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Vue核心概念Getter的使用方法
2019/01/18 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
在双python下设置python3为默认的方法
2018/10/31 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
SQL语言面试题
2013/08/27 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
环保标语口号
2014/06/13 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
医院保洁员管理制度
2015/08/05 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python