vue中使用element ui的el-tree树形控件 选中子节点获取不到父节点以及回显问题

一、选中子节点，没全选获取不到父节点的问题

html代码

<el-tree style="margin: 20px 0" ref="tree" node-key="id" show-checkbox default-expand-all :data="allPermissions" :props="defaultProps" :show-checkbox="true"/>

data数据

data() {
            return {
                allPermissions: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                roleInfo: {},
                buttonLoading: true
            };
        },

使用getHalfCheckedKeys和getCheckedKeys获取数据然后合并两个数组

// 获取选中的父节点
let parentId = this.$refs.tree.getHalfCheckedKeys()
// 获取选中的子节点
let permissionId = this.$refs.tree.getCheckedKeys()
// 合并
let mergeArr = parentId.concat(permissionId);
this.roleInfo.permissions = mergeArr.length > 0 ? mergeArr.join(",") : ''
console.log('parentId',parentId);
console.log('permissionId',permissionId);
console.log('he',mergeArr);
console.log('roleInfo',this.roleInfo);
//提交数据操作

特别注意 ：只有element ui的版本是2.2.2往上才可以

二、回显问题

json数据格式如下

{
    "msg": "成功",
    "code": 200,
    "data": {
        "items": [
            {
                "id": 16,
                "name": "sdfsdf2222",
                "children": [
                    {
                        "id": 43,
                        "name": "111",
                        "children": [
                            {
                                "id": 45,
                                "name": "添加",
                                "children": []
                            },
                            {
                                "id": 46,
                                "name": "修改",
                                "children": []
                            },
                            {
                                "id": 47,
                                "name": "删除",
                                "children": []
                            }
                        ]
                    }
                ]
            },
            {
                "id": 18,
                "name": "大师傅地方",
                "children": [
                    {
                        "id": 34,
                        "name": "fghfg",
                        "children": []
                    },
                    {
                        "id": 42,
                        "name": "撒旦发射点",
                        "children": []
                    }
                ]
            },
            {
                "id": 19,
                "name": "的风格",
                "children": []
            },
            {
                "id": 36,
                "name": "xcvxs",
                "children": []
            },
            {
                "id": 37,
                "name": "撒旦发射点",
                "children": []
            },
            {
                "id": 38,
                "name": "士大夫",
                "children": []
            },
            {
                "id": 39,
                "name": "士大夫",
                "children": []
            }
        ],
        "role": {
            "id": 2,
            "name": "ceshi2",
            "permissions": [
                "16",
                "43",
                "45"
            ]
        }
    }
}

实际使用setCheckedKeys的效果并不是我们想要的效果

看文档使用setChecked循环给值

代码

let result = await this.$API.role.reqRolePermission(roleId);
if(result.code == 200){
    if(result.data.role.permissions.length > 0){
        
        result.data.role.permissions.forEach((item) => {

            // 确保组件已挂载并且数据准备完毕
            this.$nextTick(() => {
                // 使用 setChecked 方法
                this.$refs.tree.setChecked(item, true, false);
            });
           
        });
    }
}

setChecked函数的效果

注意：如果setChecked没有效果的话一定要用 this.$nextTick 确保组件已挂载并且数据准备完毕