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 相关文章推荐
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
实例分析javascript中的异步
Jun 02 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
php array_map()函数实例用法
2021/03/03 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
化学相关工作求职信
2013/10/02 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
党员干部承诺书
2014/03/25 职场文书
表扬信格式模板
2015/05/05 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
教师读书活动心得体会
2016/01/14 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript