Element-plus dialog组件里面tabs切换时闪烁的问题

169 阅读1分钟

闪烁问题

是这样的,我有一个列表,双击某行数据出现dialog,然后dialog里面有一个tabs,有三个选项卡,我刚双击行数据打开dialog的时候,tab里面的表格列表会闪烁一下。

image.png

image.png

咨询了别的大佬才知道,造成这个现象的原因是渲染问题,当你双击打开dialog时,tab并没有高度,然后渲染出列表,列表是有高度的,从而导致一个从无到有的高度,造成了一下闪烁,因为浏览器计算dom高度也是需要时间的的。

  • 解决方法很简单,给选项卡tab高度就可以解决掉这个问题。 image.png

dialog挂载卸载问题

顺便提一嘴,我是用的自己封装的dialog,通过v-model来控制显示隐藏,我发现当我双击了第一行数据的时候没问题,相对应的调取了接口,然后我关闭掉dialog,我再次双击列表的第二行数据发现没有调用接口,还是第一行的数据,我这里造成这个的原因是dialog并没有完全的卸载,就是相当于v-show隐藏了而已,从而没有触发我dialog里面组件的onMounted函数

第一种方案

dialog组件加个v-if

image.png

第二种方案

dialogdestroy-on-close属性,默认为false,并在dialog关闭的回调函数里面把destroy-on-close属性改为true即可。

image.png

image.png

image.png