el-tree check-strictly为false实现选择和取消选择一个节点时，子节点跟着选中和取消

这是el-tree设置check-strictly为true时的默认效果：

可以看到，当一个节点的子元素全部取消勾选后，该节点也取消了勾选，如果你想实现当某个节点的子元素全部取消勾选后，该节点不会取消勾选，或许这篇文章会帮助到你。

先看具体实现效果：

核心：绑定check事件和设置check-strictly为true，当点击某个节点时判断是勾选还是取消勾选；找到子节点和已勾选的节点，如果是勾选用concat合并再用set去重，如果是取消勾选在已勾选的节点中去掉子节点，最后用setCheckedKeys或者setCheckedNodes设置选中行。

<el-tree :data="apiScopeGrantList"
    show-checkbox
    node-key="id"
    ref="treeApiScope"
    check-strictly
    :default-checked-keys="apiScopeTreeObj"
    :props="props"
    @check="apiScopeGrantListCheck">
</el-tree>

后端返回回来的大概数据结构：a: { hasChildren: false / true, id: String [, children: Array ] }

主要JS代码：

apiScopeGrantListCheck(a, b) {
    this.handleCheck(a, b, this.$refs.treeApiScope);
},
handleCheck(a, b, refDom) {
    if(a.hasChildren) {
        const children = this.myFlat(a.children, Infinity);
        const checkedKeys = b.checkedKeys.slice();
        if(b.checkedKeys.indexOf(a.id) != -1) {
            //勾选了a
            const tempArr = Array.from(new Set(checkedKeys.concat(children)));
            refDom.setCheckedKeys(tempArr);
        } else {
            //取消勾选a，计算差集
            let checkedKeysSet = new Set(checkedKeys);
            let childrenSet = new Set(children);
            let newArr = [...checkedKeysSet].filter(ele => !childrenSet.has(ele));
            refDom.setCheckedKeys(newArr);
        }
    }
},
myFlat(arr, deep) {
    //将数组进行扁平化处理
    return deep > 0 ? arr.reduce((acc, val) => {
        val.hasChildren ? acc.push(val.id) : "";
        return acc.concat(val.hasChildren ? this.myFlat(val.children, deep - 1) : val.id)
    }, []) : arr.slice();
}