ElementUI-在Dialog中, 获取Table组件的ref值为undefined

记录一下这个问题, 以便后期翻阅.
需求:
在 Dialog对话框中, 使用的复选框Table组件, 我的需求是 在显示对话框时, 清空Table组件的复选框勾选状态

问题:
在显示对话框后, 通过 ref 获取table时, 结果返回undefined!!!

HTML代码

显示对话框的函数

控制台显示

因为 获取ref的结果为undefined, 才导致无法使用 clearSelection 清空函数.

---

后来 度娘谷哥 了一番, 有很多帖子说套上 $nextTick 就行. 我也试了试. 代码如下:

控制台显示

当场郁闷了, 跟着网上说的做了, 却还是不行.
我又仔细试了试, 发现: 这个方法虽然报错, 但是, 只有第一次显示对话框时, 报这个错误. 后面再关再开, 就不再报这个错了, 而且清空函数也执行了, 有效果了.

初步发现后, 纠结第一次的报错, 虽然效果实现了, 但第一次报错终究让我难受. 接着又稍稍多了解了一下 nextTick, 毕竟是加了这个才有效果的.

发现 nextTick 是一个延迟执行函数, 主要是等DOM更新后, 再执行函数里面的代码.

按这个说法, 之前没加nextTick, 返回值是undefined, 也就是说, 触发对话框显示函数时, 先获取ref, 再显示对话框, 对话框没有真正显示时, ref 是得不到table的. 于是我F12在对话框前后对比了一下, 确实如此. 如下:

未打开对话框时的DOM

打开对话框时的DOM

此时, 瞬间明了, 对话框函数触发后, 先显示对话框, 再获取ref即可.

显示对话框的函数

这也明白为什么nextTick在前, 显示对话框再后, 会出现第一次报错, 后面就不报错的原因了.

最终结论:
在ElementUI组件中, 对话框嵌套表格时, 需要使用ref时, 一定要先渲染DOM, 再通过nextTick 去获取ref.

如有说错的地方, 请留言, 我会及时纠正的. 大家共用进步 ^ _ ^