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

本文链接：https://blog.youkuaiyun.com/larry_liujunwei/article/details/100114934

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：

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