vue树状图el-tree父节点选择联动子节点，子节点选不影响父节点

最终样式图：

最终效果为：父节点选中时，选中所有子节点，父节点取消时，取消所有子节点，子节点选中不影响父节点

案例一：

选中父节点后取消子节点不影响父节点选中状态

案例二：

取消父节点后选择所有子节点，父节点状态不变

代码展示

前端页面代码展示：

1.  
   <el-tree
2.  
   style="max-height: 300px;overflow-y: auto;"
3.  
   :data="custGroupList"
4.  
   :default-checked-keys="searchForm.custGroup"
5.  
   :check-strictly="true" **设置树状图状态为互不关联
6.  
   @check-change="handleMenuCheckChange" **@check-change 与@change效果类型多了种可以获取选中状态的效果
7.  
   show-checkbox **设置树状图为多选框结构
8.  
   ref="tree"
9.  
   node-key="code"
10.  
    :props="defaultProps">
11.  
    </el-tree>

js代码展示：

1.  
   //树状图节点点击选中事件
2.  
   handleMenuCheckChange(data,check,subCheck){ //data为选中节点信息，check选中状态
3.  
   if (data.children !== undefined && data.children !== null) { //是否包含子节点
4.  
   this.checkNode(data.children,check) //调用checkNode方法
5.  
   }
6.  
   //获取所有被选中的节点信息
7.  
   let nodes = this.$refs.tree.getCheckedNodes(false, false)
8.  
   //将获取到的信息赋值（根据自己的需求）
9.  
   this.custGroupDesc = nodes.map(item => item.CN_NAME)
10.  
    this.searchForm.custGroup = nodes.map(item => item.code)
11.  
    },
12.  
    //选中所有下级节点
13.  
    checkNode(data,check){
14.  
    //遍历所有下级节点信息
15.  
    data.forEach(item => {
16.  
    //通过节点信息设置选中状态
17.  
    this.$refs.tree.setChecked(item,check,false)
18.  
    //是否包含下级节点，包含下级节点则选中所有下级节点
19.  
    if(item.children !== undefined){
20.  
    this.checkNode(item.children,check)
21.  
    }
22.  
    })
23.  
    }