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

组件：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 el-table表格出现抖动闪动问题的解决相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...

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

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

最新文章

热门文章