element-plus：el-tree ref初始化异常记录
文章目录
- 描述
- 问题
- 解决
记录一个tsx 下el-tree的小问题
描述
<Dialog v-model="showEdit" ref="EditWin" :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 字段
[{"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)
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里的原因
真的是有点奇特的问题。