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 ...
随机推荐
- day 22 - 1 面向对象
面向对象 字典实现人狗大战 #定义角色 def Person(name,hp,aggr,sex): person = { 'name':name, 'hp':hp, 'aggr':aggr, 'sex ...
- 很好用的电脑桌面远程控制软件 支持多平台 Win，Mac，Debian… 等操作系统 Anydesk
很好用的电脑桌面远程控制软件 支持多平台 Win,Mac,Debian, Ubuntu, FreeBSD… 等操作系统 Anydesk 官网下载地址:https://anydesk.com/remot ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》
Arrays和String单元测试 一.类的作用 1.- String类 charAt String的charAt的作用是将字符串中第i个位置上的字符(从0开始计数)赋值给n,其用法为n=string ...
- A Discriminative Feature Learning Approach for Deep Face Recognition
url: https://kpzhang93.github.io/papers/eccv2016.pdf year: ECCV2016 abstract 对于人脸识别任务来说, 网络学习到的特征具有判 ...
- 使用freemarker生成word文档处理表格数据
1.把需要从数据库取值的字段用${}括起来,如:${busDate};2.表格数据的循环需要加标签:<#list tbl3 as tbl3>......</#list>< ...
- 【codechef】FN/Fibonacci Number
题意 给出 c 和 P ,求最小的非负整数 n 使得 \(Fib(n)=c(mod~ P)\) 其中 P 是质数且 模 10 等于一个完全平方数(也就是说 P 的末位是个完全平方数,那么只能是 1 或 ...
- Java入门细则
(一)一个完整的Java.源程序应该包括下列部分: package语句,该部分至多只有一句,必须放在源程序的第一句. import语句,该部分可以有若干import语句或者没有,必须放在所有的类定 ...
- STM32的定时器定时时间计算（计数时间和中断定时时间）
时基单元 可编程高级控制定时器的主要部分是一个16位计数器和与其相关的自动装载寄存器.这个计数器可以向上计数.向下计数或者向上向下双向计数.此计数器时钟由预分频器分频得到. 计数器.自动装载寄存器和预 ...
- window10 蓝牙只能发不能收文件解决办法
打开“通过蓝牙发送和接收文件”,在“接收文件”界面中无法接收蓝牙发送的文件 解决办法: 1. win+R后,输入msconfig,回车 2. 点击服务,勾选隐藏Microsoft服务,点击全部禁用 3 ...
- Hive 2.1.1 学习笔记
1.修改conf下的配置文件cp -a hive-default.xml.template hive-site.xml2.进入bin目录启动hive./hive 报错Exception in thre ...