[Bug Report] tab switch two forms, the first time switch in, table rendering will flicker

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web

https://element.eleme.io/

MIT License

54.12k stars 14.64k forks source link

Closed KokoTa closed 6 years ago

KokoTa commented 6 years ago

2.0.9

Chrome

2.5.2

解决闪烁问题

初次渲染会有闪现情况

element-bot commented 6 years ago

Translation of this issue:

2.0.9

Chrome

2.5.2

Solving the problem of scintillation

The first rendering will be flashing

Leopoldthecoder commented 6 years ago

Use v-cloak.

athena0304 commented 6 years ago

@Leopoldthecoder 这个v-cloak加了并没有生效啊

athena0304 commented 6 years ago

@Leopoldthecoder 这里有具体例子，麻烦能给出确切的解决方案，谢谢 https://jsfiddle.net/athena0304/ztey5L41/1/

KokoTa commented 6 years ago

@athena0304 我有一个变通方法，不过只试用于列数相差不大的表格，即渲染列的数量为所有表格中列数最大的那个数，再根据数据变化替换列中的数据或添加删减列。鬼畜是因为切换瞬间没有数据，列加载不出来，但是如果是替换数据，那么列已经是加载出来的了，那么就不会鬼畜，或者说不会那么明显。

Leopoldthecoder commented 6 years ago

v-cloak 好像确实不行，不过 v-if 可以：https://jsfiddle.net/ztey5L41/2/

athena0304 commented 6 years ago

@Leopoldthecoder 嗯嗯，v-if可以，感谢感谢，可是这样还是有点‘麻烦’，每次还要写多余的逻辑。。这个问题的原理是什么呢，怎样能从根本上避免呢，是因为用js动态算的表格宽度，动态渲染引起的么

Leopoldthecoder commented 6 years ago

非激活标签下的 Table 的父元素由不可见变为可见时宽度发生变化。Tabs 如果是懒渲染的话就可以从根本上解决这个问题，不过这个就是 breaking change 了。