关于vue.js:eltree父子节点相互关联操作

本次研究课题为：

el-tree 如何在点击父节点时全副选中所有子节点，点击子节点时，父节点仍然是选中状态

这个性能在 elementui 中不予提供，要本人写

上面给小伙伴们提供一下思路和代码

例如组织架构树形构造

<el-tree
    :data="data"
    show-checkbox
    default-expand-all
    node-key="id"
    ref="organizationTree"
    highlight-current
    @check="chooseDepartment"
    :expand-on-click-node="false"
    :check-strictly="true"
    :props="defaultProps">
</el-tree>

chooseDepartment(checkedKeys,checkedData){
    // 勾销勾选
    let [accessibleList,getCheckedKeys] = [this.accessibleList,this.$refs.organizationTree.getCheckedKeys()];
    // 循环删除 this.accessibleList 中的项
    for(var i in accessibleList){if(accessibleList[i].id == checkedKeys.id){this.accessibleList.splice(i,1);
            console.log(this.accessibleList);
            return;
        }
    }
    // 增加勾选
    let [arr,newArr] = [[],this.$refs.organizationTree.getCheckedKeys()];
    arr.push(checkedKeys);
    function dealData(arr,newArr){for(var i in arr){newArr.push(arr[i].id);
            dealData(arr[i].children,newArr);
        }
    }
    // newArr 代表获取进去的以后节点以及其下的所有子节点的 id
    dealData(arr,newArr);
    this.$refs.organizationTree.setCheckedKeys(newArr);
    // newJsonArr 代表所有选中的节点
    let newJsonArr = this.$refs.organizationTree.getCheckedNodes();
    this.accessibleList = newJsonArr;
    console.log(this.accessibleList);
},

最初打印后果 this.accessibleList 是一个类数组对象

同学们可依据本人须要来获取数组、对象、逗号字符串等多种格局的数据

原创文章链接:https://www.toutiao.com/i6881556363982406152/