記錄一個tsx 下el-tree的小問題

描述

  <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-treeref="MenuRef"style="max-width: 600px":data="MenuData"show-checkboxnode-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里的原因
真的是有點奇特的問題。