elementUI el-tree setCheckedKeys使用nextTick出现的问题
Posted Life Log
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI el-tree setCheckedKeys使用nextTick出现的问题相关的知识,希望对你有一定的参考价值。
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading \'setCheckedKeys\')"
TypeError: Cannot read properties of undefined (reading \'setCheckedKeys\')
elementUI使用el-tree做数据回显使用setCheckedKeys时报setCheckedKeys为undefined
-
确保使用
this.$nextTick(()=>)
this.$nextTick
的作用是修改数据后立刻得到更新的DOM -
确保DOM初始化之后再nextTick
当el-tree嵌在el-dialog中,或是使用v-if去控制一个块儿的展示时,确保先将DOM初始化后再进行nextTick
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-tree ref="menu"
node-key="id"
:data="menuTree"
:check-strictly="!form.menuCheckStrictly"
:empty-text="$t(\'system.role.pleaseWait\') || \'加载中,请稍后\'"
:props="defaultProps"
show-checkbox></el-tree>
</el-dialog>
getCheckedMenuByRoleId(roleId).then(res =>
this.open = true // 正确做法,打开dialog时才会进行DOM初始化
this.$nextTick(() =>
this.$refs.menu.setCheckedKeys(res.data)
)
// this.open = true // 错误做法,还未进行DOM初始化就进行nextTick
)
前端小白一枚,如有错误请指正~
参考:
https://vue3js.cn/interview/vue/nexttick.html#一、nexttick是什么
以上是关于elementUI el-tree setCheckedKeys使用nextTick出现的问题的主要内容,如果未能解决你的问题,请参考以下文章
elementui el-tree组件flex布局出现横向滚动条
elementui 后台管理系统遇到的问题(二) 树形控件 el-tree
elementui 后台管理系统遇到的问题(二) 树形控件 el-tree