element-plus：el-tree ref初始化异常记录

描述

  <Dialog v-model="showEdit" :title="t('button.edit')" width="900" :maxHeight="650">
    <el-form :model="nowdata" class="dialog">
      <el-form-item
        :label="t('col.Name_cn')"
        :label-width="formLabelWidth"
        v-show="nowLocale != 'en' || isadd"
      >
      <el-form-item :label="t('col.Permission')" :label-width="formLabelWidth">
        <!-- 权限设置 -->
        <div class="custom-tree-node-container">
          <el-tree
            ref="MenuRef"
            style="max-width: 600px"
            :data="MenuData"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :props="{
              class: customNodeClass,
              label: nowLocale == 'en' ? 'name_en' : 'name_cn'
            }"
            @node-click="nodeClick"
          />
        </div>
      </el-form-item>
    
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showEdit = false">{{ t('button.cancel') }}</el-button>
        <el-button type="primary" @click="doitemEdit()"> {{ t('button.ok') }} </el-button>
      </div>
    </template>
  </Dialog>

MenuData：
[{"id":1,"parentid":0,"name_cn":"首页目录","name_en":"Home"},{...}]

点击编辑后 一个弹窗内设置菜单权限，那么问题往往是 控件的赋值取值。
即 RootItem 的 menuids 字段

roleData：
[{"id":4,"name_cn":"游客","name_en":"Guest","menuIds":"17,18"},{...}]

问题

取值(没有问题)
const MenuRef = ref()
const Submit=()={
 nowdata.value.menuIds = MenuRef.value.getCheckedKeys(true, true).toString()
 }
赋值(点击编辑 打开弹窗 无法赋值给tree。
-MenuRef.value 是underfined,没有挂起)
const doEdit = (index: number, role: RoleItem) => {
  MenuRef.value.setCheckedKeys(role.menuIds.split(','))
}

当然 setCheckedKeys、getCheckedKeys都是可以在文档里找到的
文档 https://element-plus.org/zh-CN/component/tree.html

解决

const doEdit = async (index: number, row: RoleItem) => {
  await nextTick()
  MenuRef.value.setCheckedKeys(row.menuIds.split(','))
}

简单的说，加了个异步状态，解决了。
虽然我设置settimeout 延迟两秒 也是没解决的，可能是因为我的tree在Dialog里的原因
真的是有点奇特的问题。