怎么实现带有checkbox的tree树组件多层嵌套的联动

Question

我目前在做带有checkbox的tree组件，我渲染的思路是从父类向子类递归，有children属性就让children调用自己，代码如下

     data = [{
        label: 111,
        children: [{
            label: 222,
        }]
      },  {
        label: 333
      }]
    translate = (content, key, first) => {
        content.forEach((i, index) => {
            i.disabled = this.defaultDisableAll;
            if (this.defaultDisabledList.length > 0) {
                i.disabled = this.defaultDisabledList.indexOf(i[this.nodeKey]) > -1;
            }

            i.key = key + (first ? '' : '-') + (index + 1);

            i.checked = this.defaultCheckedKey.indexOf(i[this.nodeKey]) > -1;

            i.expanded = this.defaultExpandAll;
            if (this.defaultExpandedKey.length > 0) {
                i.expanded = this.defaultExpandedKey.indexOf(i[this.nodeKey]) > -1;
            }

            i.nodeLevel = i.key.split('-').length;
            if (i.checked) {
                treeData.selectedKeys.push(i.key);
            }
            if (i.children && i.children.length > 0) {
                treeData.newDataMap[i.key] = {...i};
                this.translate(i.children, i.key, false);
            } else {
                treeData.newNodes.push({...i});
            }
        })
    };
    ngOnInit() {      
       this.translate(this.data, '', true);
    }

现在需要做checkbox的选择联动，从父类向子类递归的话，需要n-1次递归，感觉很影响性能，有大神给个checkbox多层嵌套联动的解决方案么

Answer 1

我的思路是这样的，每次点击一个checkbox的时候，向父级跟children发出通知，
初始化的时候，默认属性就通过设置属性的方式去修改默认的checked，
建立有children属性的newDataMap对象

   calculateCheckState = node => {
        // 向下通知, 如果有的话
        if (node.children) {
            this.informDown(node.children, node.checked);
        }
        // 向上通知
        this.informUp(node);
    };

    informUp = node => {
        // 计算父类的key
        let parent;
        const preKey = node.key.split('-').slice(0, -1).join('-');
        // 如果有父类的话
        if (preKey) {
            parent = treeData.newDataMap[preKey];
            const checkedLength = parent.children.filter(i => i.checked).length;
            // 如果子类选了，却没有全选,或者父类下的子类没有全选的，即有半选的
           if (parent.children.length > checkedLength && checkedLength > 0 ||
                parent.children.filter(i => !!i.indeterminate).length > 0) {
                this.changeCheckState(parent, false, true)
            } else if (parent.children.length === checkedLength) { // 子类全选
                this.changeCheckState(parent, true, false);
            } else if (checkedLength === 0) { // 子类都没有选
                this.changeCheckState(parent, false, false);
            }
        }
        // 如果父类还有父类继续通知
        parent && this.informUp(parent);
    }

    informDown = (child, checked) => {
        child.forEach(i => {
            this.changeCheckState(i.key, checked, false);
            if (i.children) {
                this.informDown(i.children, checked);
            }
        })
    }
    // 找到对应的key的值改掉check状态
    changeCheck = (data, checked, indeterminate) => {
        if (treeData.selectedKeys.includes(data.key)) {
            if (!checked) {
                spliceSelectedKeys(data, this.nodeKey);
            }
        } else {
            if (checked) {
                pushSelectedKey(data, this.nodeKey);
            } else {
                spliceSelectedKeys(data, this.nodeKey);
            }
        }
        data.checked = checked;
        data.indeterminate = indeterminate;
    };

    // 通过索引修改加快速度
    changeCheckState = (node, checked, indeterminate) => {
        const indexList = node.key.split('-');
        let flag = true, data = this.data;
        indexList.forEach(i => {
            if (flag) {
                data = data[parseInt(i, 10) - 1];
                flag = false
            } else {
                data = data['children'][parseInt(i, 10) - 1];
            }
        });
        this.changeCheck(data, checked, indeterminate);
    }

Answer 2

http://www.treejs.cn/v3/main....

看下这个插件 能否满足

Answer 3

可以引入第三方插件做tree组件，如zTree，功能很不错