vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用...

最新推荐文章于 2025-06-07 20:00:00 发布

转载最新推荐文章于 2025-06-07 20:00:00 发布 · 8.4k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzcsqaws/p/10675184.html

文章标签：

#ui #javascript #ViewUI

本文介绍在Vue.js中如何利用$nextTick方法解决因DOM更新异步导致的this.$refs为undefined的问题，通过实例演示了在监听dialogVisible变化时，正确设置树形组件默认选中项的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实这3个讲的是一个问题，先说下问题，我在watch里设置一个监听，当弹窗打开时，自动添加树形的默认选中项，

但奇怪的是this.$refs为undefined，自然setCheckedKeys无法使用，这个时候就要用到$nextTick，不懂的朋友先去百度下，
大致来说就是一个虚拟dom变成真实之后的一个回调，只有在回调里面才能获取到$refs，问题自然就解决了

watch: {
    dialogVisible (val) {
      if (val) {
          this.setDefaultChecked()  // 如果为true。那么调用设置树形默认值的方法
      }
    }
  },
methods: {
    setDefaultChecked () {
      this.$nextTick(() => {
        this.$refs.Tree.setCheckedKeys(this.CheckedArr) // CheckedArr 一个选中的数组element Ui的东西，关键是看$nextTick的用法
      })
    },
｝

总结一下，以后this.$refs为undefined的时候，不妨考虑下是不是真实dom还没有形成，可以用 this.$nextTick包裹一下试试，这也是 this.$nextTick我目前使用到的地方

转载于:https://www.cnblogs.com/wzcsqaws/p/10675184.html