element-ui的树型结构图，半选状态数据给后台后，返回数据带有半选父节点的剔除展示

Posted 2021-11-30 holy-amy

// html

<h2 class="text-gray">功能权限</h2>
<el-tree
    :data="permissionList"
    :props="defaultProps"
    show-checkbox
    node-key="permissionId"
    default-expand-all
    ref="tree_permissions"
    @check="change_permission"
    v-if="current_roleId"
></el-tree>

//js 只展示返回数据到渲染的半选数据的父节点的剔除

async find_function_permission_by_roleId(){
            this.isLoading = true;
            try {
                const res = await this.$http.get("scPermission/findScPermissionByRoleId/" + this.current_roleId);
                this.selectedPermissionsIds = res.data.data;
                // 将只有部分选择子节点的父节点剔除
                let arr =[];
                let arrLength = 0;
                arr = this.selectedPermissionsIds;
                arrLength = arr.length;
                let array:any = [];
                function fun(value:any,data:any,arr:any) {
                    for( let i = 0;i < data.length;i++){
                        let mod = data[i];
                        if(mod.permissionId == value) {
                            if(mod.children.length == 0){
                                arr.push(mod.permissionId);
                                return true
                            }
                            return true
                        }else {
                            if(mod.children.length != 0) {
                                fun(value, mod.children, arr);
                            }
                        }
                    }
                    return true
                }
                for(let n = 0;n < arrLength;n++) {
                    fun(arr[n],this.permissionList,array);
                }
                this.selectedPermissionsIds = array;
                let tree_permissions = this.$refs.tree_permissions as Tree;
                tree_permissions.setCheckedKeys(this.selectedPermissionsIds);
                // 数据加载完之后，修改成行内样式
                setTimeout(()=>{
                    this.$nextTick(()=>{
                        this.treeChildInline();
                    });
                },50);
            } catch (e) {
                this.$httpErrorHandle(this, e);
            }finally {
                this.isLoading = false;
            }
        },