ant vue树形菜单a-tree回显以及踩坑

废话不多说，直接贴代码

html部分

 				<a-form-item
                        :label="$t('grant')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-tree
                            v-model="checkedKeys"
                            checkable
                            style="width: 100%"
                            :tree-data="treeData"
                            :placeholder="$t('grant')"
                            v-decorator="['grant', {}]"
                            @check="onCheck"
                    >
                        <span slot="title" slot-scope="{ menuId, value }" style="color: #08c">
                        </span>
                    </a-tree>
                </a-form-item>

js部分

 onCheck(e) {
                console.log(e)
            },
            menuSelect() {
                menuSelect().then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        this.treeData = res.result
                    } else {
                        this.$message.error(result.message, 3)
                    }
                })
            },
            /** 添加角色**/
            addRole() {
                //清空表单
                this.form.resetFields();
                //清空选中
                this.checkedKeys = [];
                //树形菜单渲染
                this.menuSelect();
                //新增行为
                this.action = 'add';
                this.visible = true;
            },
            /** 修改角色**/
            editRole(record) {
                //编辑行为
                if (record) {
                    this.action = 'edit';
                }
                //清空选中
                this.checkedKeys = [];
                //树形菜单渲染
                this.menuSelect();
                this.visible = true;
                //数据回显
                this.$nextTick(() => {
                    this.form.setFieldsValue({ // form表单赋值
                        id: record.id,
                        roleName: record.roleName,
                        remark: record.remark,
                    });
                });
                setTimeout(() => { // 添加延时操作,解决'1' does not exist in the tree
                    //树形菜单回显
                    this.checkedKeys = record.menuIdList;
                },500);
            },

treeData数据

[
        {
            "menuId": 0, 
            "title": "一级菜单", 
            "value": 0, 
            "key": 0, 
            "children": [
                {
                    "menuId": 1, 
                    "title": "控制台", 
                    "value": 1, 
                    "key": 1, 
                    "children": null
                }, 
                {
                    "menuId": 2, 
                    "title": "系统管理", 
                    "value": 2, 
                    "key": 2, 
                    "children": [
                        {
                            "menuId": 3, 
                            "title": "用户管理", 
                            "value": 3, 
                            "key": 3, 
                            "children": null
                        }, 
                        {
                            "menuId": 4, 
                            "title": "角色管理", 
                            "value": 4, 
                            "key": 4, 
                            "children": null
                        }, 
                        {
                            "menuId": 5, 
                            "title": "菜单管理", 
                            "value": 5, 
                            "key": 5, 
                            "children": null
                        }
                    ]
                }
            ]
        }
    ]

回显关键

踩坑部分：报’id’ does not exist in the tree

直接设置一个延时，500ms差不多。设置太短了还是会报’id’ does not exist in the tree