vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统，永远是最蛋疼、最复杂也最欠揍的事情，也永远是前端开发人员最苦逼、最无奈也最尿性的时刻。蛋疼的是需求变幻无穷，如同二师兄的三十六般变化；复杂的是开发难度寸步难行，如同蜀道难，难于上青天；欠揍的是产品随心所欲、为所欲为，如同村霸横行乡里、只手遮天；苦逼的是前端苦不堪言，如同哑巴吃黄连，有苦说不出；无奈的是前端无可奈何花落去，如同至尊宝戴上金箍无法爱你，摘下金箍无法救你；尿性的是前端苦尽甘来，如同唐僧师徒历经九九八十一难，终成正果的高光时刻！
又特么的南辕北辙了，矫情个鸟啊！有需求，上啊，很复杂，想啊，开发周期短，撸起袖子加油干啊（真特么的下流，一天到晚都是上啊，干啊，你特么泰迪啊）！好，闲话少叙，言归正传，咱们上一次讲到白眉大侠徐良...(你给我滚犊子)
需求是这样的，有一个树形控件，默认所有节点都不选中。
PS：如果贵司的需求没有那么复杂，就可以跳过以下内容，直接使用element-ui框架提供的tree树形控件及API即可。
要求：
1、选中父节点，子节点及孙子节点（甭管有多少层级，兹要是子辈节点）可以不选中，取消选中父节点，子节点及孙子节点也还是没有任何变化；
2、选中子节点或孙子节点，必须选中父节点及祖父节点（甭管有多少层级，兹要是祖辈节点），取消选中子节点或孙子节点，父节点及祖父节点可以不取消选中；
3、基于需求2，此时子节点及孙子节点和父节点、祖父节点都已选中，那么若取消选中父节点，则子节点及孙子节点必须取消选中，但父节点的父节点可以不取消选中，若取消选中祖父节点，则其下边的所有节点都要取消选中。
看了需求，没有实操，是不是有点懵啊？第一次接到这样的需求且网上没有这样的解决方案，是不是无从下手啊？
来看看实际的效果吧：https://runjs.cn/code/lu9nsctl
看了效果，是不是恍然大悟？紧接着是不是就觉得既然在某种程度上父子节点没有关联关系，那还要这种树形控件干嘛？恭喜你，抓住重点了！
首先，为什么我本人要用这种控件，因为我们的后台管理系统就是用的vue+element-ui框架，而且element-ui提供了这种树形控件的很多方法，比如选中子节点后要同时获取到该子节点的id以及其父节点和祖父节点的id，再比如通过接口返回的数据回显已经选中的所有节点，使用起来很方便的，只是需要熟悉它的API并灵活运用罢了。如果你没有用element-ui框架或者你想自己实现这样的效果，也未尝不可，只是在开发周期比较短的情况下，你要自己去写html、js、css，暂且不说js实现起来有多费劲，单说html和css就够你喝一壶的。当然，我也不是说不提倡自己去写，在时间允许的情况下自己写也可以，自己实现出来的，很能提高自己的js能力和业务逻辑的！
接下来就是具体的实现代码了，这篇文章的解决方案是基于vue+element-ui的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-tree-node__label{
position: relative;
}
.el-tree-node__label:before{
content:'';
width:20px;
height: 20px;
display: block;
position:absolute;
top:0px;
left:-24px;
z-index:999;
}
.el-checkbox__inner{
top:0;
}
</style>
<title>element-ui树形控件</title>
</head>
<body>
<div id="app">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
check-on-click-node
:default-expand-all="true"
:check-strictly="true"
:expand-on-click-node="false"
@node-click="nodeClick"
>
</el-tree>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
treeData: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
children: [{
id: 11,
label: '四级 1-1-1',
}]
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
},
methods: {
nodeClick(data, node){
vm.childNodesChange(node);
vm.parentNodesChange(node);
},
childNodesChange(node){
let len = node.childNodes.length;
for(let i = 0; i < len; i++){
node.childNodes[i].checked = false;
vm.childNodesChange(node.childNodes[i]);
}
},
parentNodesChange(node){
if(node.parent){
for(let key in node){
if(key == "parent"){
node[key].checked = true;
vm.parentNodesChange(node[key]);
}
}
}
}
}
})
</script>
</body>
</html>
注意：
1、关于代码中element-ui树形控件的API可自行查阅官方文档，这里不做赘述；
2、控件中使用了check-on-click-node这个属性，官方文档的解释是：是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。为什么要使用这个属性呢？
因为在点击复选框时，虽然官方文档给了一个check的方法，解释是：当复选框被点击的时候触发，其有两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性，但依旧无法实现我想要的效果。
这三张图就是check方法打印出来的效果，打印出来的参数的属性中根本就没有可供设置为true或false的checked，更不包含父节点，这怎么玩？还怎么设置父节点？
好在控件有node-click这个方法，官方解释是：节点被点击时的回调，其有三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。正好这个方法的第二个参数Node就是我想要的，因为既然某种程度上父子节点无关联，那么要想获得当前节点的父节点和子节点，就只能通过第二个参数Node去获取了。这里具体的参数的打印效果我就不展示了。
其实这里还有一个问题，就是如果没有下边的样式：
<style>
.el-tree-node__label{
position: relative;
}
.el-tree-node__label:before{
content:'';
width:20px;
height: 20px;
display: block;
position:absolute;
top:0px;
left:-24px;
z-index:999;
}
.el-checkbox__inner{
top:0;
}
</style>
那么只点击复选框时，由于上边已说明的问题，还是无法实现需求，所以既然节点被点击时可以实现选中对应的复选框并实现需求，那么就可以用节点的:before样式来覆盖在checkbox控件上，这样就等于模拟了点击复选框，就可以完美的实现需求想要的效果了！
需求有点复杂，也写了这么多，并在文中伴有实操demo，相信各位童鞋都能看懂。
本文系原创，转载请注明版权，谢谢！
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解的更多相关文章
- Element ui 使用 Tree 树形控件
使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...
- BootstrapBlazor实战 Tree树形控件使用(2)
继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- ElementUI Tree树形控件renderContent return时报错
问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...
- vue实现elment 可编辑树形控件
功能实现程度: elment树形控件,已具备新增.删除功能,此项目,添加编辑功能,新增时可对节点命名,也可直接给已添加的节点修改名字 先看效果: 控件有所改动,如加输入框,输入关键字过滤,节点图标变换 ...
- BootstrapBlazor实战-Tree树形控件使用(1)
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...
- vue-element Tree树形控件通过id默认选中
一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...
- 【vue】使用vue+element搭建项目，Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
随机推荐
- vscode 插件 与 技巧
lit-html 下载量:3 万 在 JavaScript/TypeScript 的文件中,如果有使用到 HTML 标记,lit-html 提供语法高亮和相应的补全支持. Git History 下载 ...
- Burp插件开发——环境配置
最近打算开发个Burp插件,从网上各种地找资料学习.第一步就应该是环境配置,请见下文. (其实最重要的前提是你已经安装了Burp,否则下面的所有内容都是无稽之谈了. https://pan.baidu ...
- 前端笔记知识点整合之JavaScript（四）关于函数、作用域、闭包那点事
一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. ...
- redis集群结构图
在JAVA编程时,使用哨兵池获取jedis来进行数据的操作,哨兵对对集群进行监视,当主节点宕掉时,会自动将子一个子节点升级为主节点,原来的主节点上线时会自动变为从节点,主节点的变化,对于使用哨兵池方式 ...
- python使用正则解析网络地址的各个部分
参考文章: https://www.cnblogs.com/ingd/p/6182571.htmlimport re def resolveAddress(url): ""&quo ...
- Android 插件化和热修复知识梳理
概述 在Android开发中,插件化和热修复的话题越来越多的被大家提及,同时随着技术的迭代,各种框架的发展更新,插件化和热修复的框架似乎已经日趋成熟,许多开发者也把这两项技术运用到实际开发协作和正式的 ...
- 获取页面所有a标签href
for(i=0;i<=document.getElementsByTagName("a").length;i++){ console.log(document.getElem ...
- 一丶Http协议
一 HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则 ...
- mysql 函数学习(常用)
1.时间函数(组1) SELECT CURRENT_DATE() AS date, CURRENT_TIME() AS `time`, CURRENT_TIMESTAMP() AS `timestam ...
- python+selenium自动测试之WebDriver的常用API（基础篇一）
基于python3.6,selenium3.141,详细资料介绍查看官方API文档,点击这里 一.对浏览器操作 driver = webdriver.Chrome() # 初始化chrome driv ...