vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

最新推荐文章于 2024-08-26 18:25:03 发布

larry_liujunwei

最新推荐文章于 2024-08-26 18:25:03 发布

阅读量1w

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/larry_liujunwei/article/details/100114934

版权

本文详细探讨了在Vue+Element-UI的Tree组件中，如何实现复杂的选中关系：选中父节点不影响子节点，选中子节点必须选中所有祖辈节点，以及在特定情况下取消选中父节点或祖辈节点对子节点的影响。文章深入浅出地阐述了树形控件的选中逻辑实现。

摘要由CSDN通过智能技术生成

要求：

1、选中父节点，子节点及孙子节点（甭管有多少层级，兹要是子辈节点）可以不选中，取消选中父节点，子节点及孙子节点也还是没有任何变化；

2、选中子节点或孙子节点，必须选中父节点及祖父节点（甭管有多少层级，兹要是祖辈节点），取消选中子节点或孙子节点，父节点及祖父节点可以不取消选中；

3、基于需求2，此时子节点及孙子节点和父节点、祖父节点都已选中，那么若取消选中父节点，则子节点及孙子节点必须取消选中，但父节点的父节点可以不取消选中，若取消选中祖父节点，则其下边的所有节点都要取消选中。

<!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:b