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 ...
随机推荐
- scrapy学习
安装依赖 基础运用 在item中定义一个类(scrapy.Item)来保存 类似于django yield返回两种东西,一种是在items中定义好的类 一种是新的请求 css选择器选取的标签 如果要保 ...
- （二）ORB描述子提取源码思路与实现
ORBSLAM2中ORB特征提取的特点 ORBSLAM2中通过对OpenCV中的ORB特征点提取类进行修改,对图像进行分块提取,而后划分节点,使得每个节点中保存的特征点性能是该节点所有特征点中最好的. ...
- npx命令介绍
什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If you do not have a package.json, create one before installing ...
- 【转】子类会调用父类的@PostConstruct方法
如果一个类用@Service或@Component,那么只需要用@PostConstruct修饰某个方法,该方法能在类实例化的过程中自动执行,相当于类的构造函数.同时,具备了构造函数不具备的功能. @ ...
- Harbor修改/data目录位置
由于harbor默认数据存储位置在/data目录,且修改配置文件操作较为复杂,故这里使用软连接的方式将/data目录文件夹内容映射到/app目录下. ln -s /app/harbor/data/ d ...
- Asp.Net Core 项目搭建基础
很多新接触ASP.NET Core 技术的同学可能会对项目运行机制不了解,会碰到服务在哪添加?路由在哪配置?中间件怎么使用?依赖注入在哪写?诸如此类的问题.同样作为初学者,以下是本人在学习.Net技术 ...
- Ubuntu 18.04 安装MySQL
最近在写东西的时候,需要用到MySQL,在网上查了一下,都说Ubuntu18.04不能安装MySQL5.7.22, 总觉的不可能,所以自己就研究了一下,然后分享给大家 工具/原料 VMware W ...
- OpenCV-Python : 直方图
啥叫直方图 直方图简单来说就是图像中每个像素值的个数统计,比如一副灰度图中像素值为0的有多少个,1的有多少个... 在计算直方图之前,先了解几个术语: dims:要计算的通道数,对于灰度图dims=1 ...
- TP-Shop安装步骤教程（Windows版）
TP-Shop安装步骤教程(Windows版) PS:首次发文,请多指教! 一.安装要求 1.PHP5.4以上,MYsql5.5以上. 2.需要Phpcurl,gd库.php_mysqli,php_o ...
- git - 1.基础
配置 C:\Users\Administrator λ git config --global user.name 'tangsansan' C:\Users\Administrator λ git ...