记录一下这个问题, 以便后期翻阅.
需求:
在 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.
如有说错的地方, 请留言, 我会及时纠正的. 大家共用进步 ^ _ ^