Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined“

Myth丶恋晨 2022-11-19 00:18 652阅读 0赞

# Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined” #

--------------------

### 理解：default-checked-keys()以及this.$refs.tree.setCheckedKeys()的使用却别 ###

--------------------

报错信息：

![在这里插入图片描述][20210413193223272.png]  
**报错场景：**

使用axios发送异步请求获得角色的所有权限：

![在这里插入图片描述][20210413193552180.png]

将权限赋值到一个数组中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]  
这里我的想法是在弹出会话框前使用 `this.$refs.tree.setCheckedKeys(this.functionList);` 勾选上角色所有权限  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]  
**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 2]  
**解决过程：**

一开始我使用的是 ：`:default-checked-keys="functionList"`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]

后来发现第一次可以选择对应的角色权限，但是点击别的角色的时候，弹框弹出来的还是第一次所选的角色权限，经过检测axios得到的数据是没有问题的，我想的是可能因为`:default-checked-keys="functionList"`是只能一次赋值。

后来就改用：`this.$refs.tree.setCheckedKeys(this.functionList);`  
但是无论放在什么地方这个都会报错：`TypeError: this.$refs.tree is undefined`

**最后经过不断努力与分析：**  
使用如下方法：

this.$nextTick(() => { 
    	this.$refs.tree.setCheckedKeys(this.functionList);
    });

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]

总结：

*  原因

vue 官网中ref 下有一段话  "关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们
     - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
    
    也就是说 ref 只有等页面加载完成好之后你才能调用 this.$refs ，如果你使用v-if 、v-for渲染页面的话，
    那么在刚开始页面没没渲染之前你是拿不到this.$refs 的，所以要等到页面渲染之后拿才可以

*  this.$nextTick()的理解;

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
    它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

[20210413193223272.png]: /images/20221022/3455ea3f1db0485c992f6bf884be06f4.png
[20210413193552180.png]: /images/20221022/c1d08178d9cc49a586c3199ec48623b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]: /images/20221022/5e88c95e057944d296e63b96e141879a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]: /images/20221022/31a73b7d47294365893d873df19e198d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 2]: /images/20221022/2e3093587a7f4595bb1ae64c2d499e7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]: /images/20221022/787c968a7b514aa6a7677efbeb733302.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]: /images/20221022/d8b5c498e7f9434c902efd891ac2ffe0.png