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

最终样式图：

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

案例一：

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

案例二：

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

代码展示

前端页面代码展示：

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

js代码展示：

//树状图节点点击选中事件
      handleMenuCheckChange(data,check,subCheck){  //data为选中节点信息，check选中状态
        if (data.children !== undefined && data.children !== null) { //是否包含子节点
          this.checkNode(data.children,check) //调用checkNode方法
        }
        //获取所有被选中的节点信息
        let nodes = this.$refs.tree.getCheckedNodes(false, false)
        //将获取到的信息赋值（根据自己的需求）
        this.custGroupDesc = nodes.map(item => item.CN_NAME)
        this.searchForm.custGroup = nodes.map(item => item.code)
      },
      //选中所有下级节点
      checkNode(data,check){
        //遍历所有下级节点信息
        data.forEach(item => {
          //通过节点信息设置选中状态
          this.$refs.tree.setChecked(item,check,false)
          //是否包含下级节点，包含下级节点则选中所有下级节点
          if(item.children !== undefined){
            this.checkNode(item.children,check)
          }
        })
      }