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 ...
随机推荐
- 2018-2019-2 网络对抗技术 20165337 Exp4 恶意代码分析
1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...
- pythonのdjango 缓存
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- tp5.0 queue 队列操作
检查是否安装redis(没有请自行百度安装): phpinfo: 配置thinkphp-queue,没有请执行 composer require topthink/think-queue 加入: 创建 ...
- Pytorch学习笔记（二）---- 神经网络搭建
记录如何用Pytorch搭建LeNet-5,大体步骤包括:网络的搭建->前向传播->定义Loss和Optimizer->训练 # -*- coding: utf-8 -*- # Al ...
- 基于Python的Webservice开发(二)-如何用Spyne开发Webservice
一.功能需求 本次案例是开发一个Item的新建的WebService.IN&OUT的类型JsonDocument. 通过传入相关的参数创建Item,且相关的参数可以被缺省. 二.实现代码 引入 ...
- SpringMVC整合Thymeleaf3
(1).pom添加相关依赖 <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thym ...
- Mac os x下几款mysql客户端
Mac os x几款mysql客户端 1,Navicat 这是一款可支持多种数据库的客户端,可支持mysql,sqlite,oracle,sql server等数据库.当然也可以选择只支持某种数据库的 ...
- 二、vue之 使用vscode配置
vue之 使用vscode配置 visual studio code 简称vscode,下图为图标 ... 开启vscode ... 1.导入文件夹,选择菜单栏 文件-打开文件夹->选择相应已 ...
- Arrays类的运用，二分法，数组的复制，命令行参数的运用，二维数组，Object，equals
/*Arrays jdk中为了便于开发,给开发者提供了Arrays类, 其中包含了很多数组的常用操作.例如快速输出.排序.查找等.*/ import java.util.Arrays; public ...
- 三丶JavaScript 的基础学习(一)
知识预览 BOM对象 DOM对象(DHTML) 8 实例练习 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言 ...