element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...

在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys();
但是如果子节点不是全部选中的话，父节点算不选中。
由于我们一般想要的是就算只选中一个直接点父节点以及其父辈都算选中，所以需要自己写逻辑。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>树形列表</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app" v-cloak><el-tree:data="rootData"ref="rootTree"show-checkboxnode-key="value"default-expand-all></el-tree><button @click="getKeys">获取选中节点Key</button></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: {message: 'Hello',rootData: [{"value":16,"label":"首页","parent":-1},{"value":17,"label":"用户列表","parent":-1},{"value":18,"label":"信息列表","parent":18},{"value":19,"label":"信息管理","parent":-1,"children":[{"value":20,"label":"个人信息","parent":19},{"value":21,"label":"修改信息","parent":19}]},{"value":22,"label":"资金数据","parent":-1,"children":[{"value":23,"label":"投资分布","parent":22},{"value":24,"label":"项目分布","parent":22},{"value":25,"label":"收支统计","parent":22}]},{"value":26,"label":"系统管理","parent":26,"children":[{"value":27,"label":"机构管理","parent":26},{"value":28,"label":"角色管理","parent":26},{"value":29,"label":"岗位管理","parent":26},{"value":30,"label":"用户管理","parent":26},{"value":31,"label":"系统菜单","parent":26}]},{"value":32,"label":"车辆管理","parent":-1,"children":[{"value":33,"label":"车辆信息","parent":32}]}]},methods: {getKeys () {var aKey = this.getCheckedKeys(this.rootData, this.$refs.rootTree.getCheckedKeys(), 'value');console.log(aKey);},getCheckedKeys (data, keys, key) {var res = [];recursion(data, false);return res;// arr -> 树形总数据// keys -> getCheckedKeys获取到的选中key值// isChild -> 用来判断是否是子节点function recursion (arr, isChild) {var aCheck = [];for ( var i = 0; i < arr.length; i++ ) {var obj = arr[i];aCheck[i] = false;if ( obj.children ) {aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];if ( aCheck[i] ) {res.push(obj[key]);}}for ( var j = 0; j < keys.length; j++ ) {if ( obj[key] == keys[j] ) {aCheck[i] = true;if ( res.indexOf(obj[key]) == -1 ) {res.push(obj[key]);}break;}}}if ( isChild ) {return aCheck.indexOf(true) != -1;}}}}})</script>
</body>
</html>

getCheckedKeys函数用来获取选中的node-key指向的键值。

element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...相关推荐

【vue】使用vue+element搭建项目，Tree树形控件使用
目录一.安装依赖二.常用属性.事件三.demo应用 html代码属性用法 3.2.1 :default-expanded-keys(默认展开项) 3.2.2 :props="defa ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
《实用VC编程之玩转控件》第15课：Tree树形控件
本文转载自:VC驿站 https://www.cctry.com/thread-297465-1-1.html 1.控件简介: Tree树形控件也是我们编程过程中比较常用的一个控件,而且在其他软件中也 ...
vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位具体实现代码如下: <template><div class="d ...

element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...

element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...相关推荐

最新文章

热门文章