Element表格出现闪动问题_给el-table设置max-height属性时新增行表格会抖动

Element表格出现闪动问题

问题描述

今天在开发的过程中，使用到了Element的表格组件，但是在数据渲染到表格的时候出现了表头被拉伸，能看得到肉眼可见的闪动，大约是1秒钟左右，这个问题的出现严重影响到了用户体验，得解决！！！

• 问题复现（为了捕捉到闪动这一瞬。。。截图可把我累惨qwq）

从第一张图到第二张图的过度，就是闪动的过程。。。。（是不是很抽象。。我是不是应该放一张动图。。）上动图QAQ

解决问题

之前为了固定表头使用的height属性，导致从有数据切换到无数据的时候出现了渲染故障，这时候将height属性换成max-height就能解决问题了。

<el-table max-height='550' :data="dataInfo" border style="width: 100%">
	<el-table-column :label="item" min-width='100' v-for="(item,index) in dataHeader">
		<template slot-scope='scope'>
			<span>{{scope.row[index]}}</span>
		</template>
	</el-table-column>
</el-table>
1
2
3
4
5
6
7

end~~~

鉴于笔者水平有限，若本文存在不当之处欢迎指出噢

有疑问的同学，欢迎在下方留言

若未能及时回答，也可以选择加入前端开发交流群提问噢~~

群号：216644014(前端开发交流群)