elment-tree 树组件功能实现： 实现父节点选中，而子节点不选中；子节点选中，父节点选中；子节点全部取消，父节点不取消；父节点取消，子节点全去选

前言：

需求为el-tree组件中显示选择框，父节点选中时子节点不选中，子节点选中时父节点选中；子节点全部取消而父节点不取消；父节点取消，子节点全去选。

在网上浏览一些资料实现后，写这篇文章来总结记录一下~

实现关键

1. 使用check-strictly属性取消父子级相关联关系

check-strictly

在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

boolean

—

false

2.使用check事件函数编写逻辑

check

当复选框被点击的时候触发

共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

 注意：使用方法前必须设置 node-key 属性

代码实现

 <el-tree
     ref="tree"
     show-checkbox
     :data="menuTreeData"
     :props="treeProps"
     :check-strictly = "true"
     node-key="id"
     @check="checkChange"
     ></el-tree>

        // 通过check的回调里面获取节点id,再获取节点的node对象
        checkChange(data) {
            //根据key拿到Tree组件中的node节点
            const node = this.$refs.tree.getNode(data.id)
            //调用节点处理方法
            this.setNode(node)
        },
        //递归设置子节点和父节点
        setNode(node) {
            if (node.checked) {
                //如果当前是选中checkbox,则递归设置父节点和父父节点++选中
                this.setParentNode(node)
            } else {
                //如果当前是取消选中checkbox,则递归设置子节点全部取消选中
                this.setChildNode(node)
            }
        },
        //递归设置父节点全部选中
        setParentNode(node) {
            if (node.parent) {
                //循环对象的parent属性，设对象节点选择框为选中状态
                for (const key in node) {
                    if (key === 'parent') {
                        node[key].checked = true
                        //递归调用相应父节点处理函数
                        this.setParentNode(node[key])
                    }
                }
            }
        },
        //递归设置子节点全部取消选中
        setChildNode(node) {
            if (node.childNodes && node.childNodes.length) {
                //将此节点下所有子节点设为选中状态
                node.childNodes.forEach(item => {
                    item.checked = false
                    //递归调用相应子节点处理函数
                    this.setChildNode(item)
                })
            }
        },