element-ui el-table表格出现抖动闪动问题的解决

element-ui el-table表格出现抖动闪动问题的解决_第1张图片

组件:element-ui  el-table

问题描述:勾选批量选择框、切换tab、输入查询条件时,table表格出现抖动,体验极差。

原因:切换不同的tab,需要增减(显隐)不同的列,所以用v-if来控制,当增减较多列时,用v-if控制的列出现渲染不正确问题。然后发现给v-if的列绑定 key 就可以正常渲染了,一开始这样写 :key="Math.random()",开始出现上面所描述的table表格抖动闪动问题。花了较长时间去寻找解决办法,一直无果,最后发现给 key 绑定确定的值,例如 :key="1",:key="2" ,抖动现象就没了......

总结:用 v-if 控制增减 table 的列,有时会出现渲染不对问题,可以通过给这些列绑定key以正确渲染,例如 :key="1"。踩的坑是写成 :key="Math.random()",导致出现table抖动问题......

你可能感兴趣的:(前端,element-ui,vue.js,elementui)