解决：element切换tab时table的抖动问题

抖动可能原因：

element有做自动检测适应。
页面出现重绘。
v-for的key属性渲染不对。

百度提供的解决方案有：

v-show改成v-if。由于本需求的所有tab下的表格均需要显示，所以不能使用v-if使它卸载调，此路不通。
el-table-column添加:key="Math.random()"，先不说无效吧，产生的随机值也是有重复的可能的，绝对大坑，弃用。
给 key 绑定确定的值，例如 :key=“1”，:key=“2”。无效。

最终解决方案：
使用element 表格中的doLayout方法，对 Table 进行重新布局。

  beforeUpdate() {this.handleTabClick()},methods: {/*** tab切换*/handleTabClick() {this.$nextTick(() => {this.$refs.multipleTable && this.$refs.multipleTable.doLayout()this.$refs.multipleTable2 && this.$refs.multipleTable2.doLayout()this.$refs.multipleTable3 && this.$refs.multipleTable3.doLayout()})},}

解决：element切换tab时table的抖动问题相关推荐

1.Echarts的坑：切换tab时，echart显示默认的100px
1.切换tab时,echart显示默认的100px 切换tab时,elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法切换 ...
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
一.前言最近因为项目要求,开始学习并且使用React和Ant Design框架.在前端开发过程中,遇到这样一个页面:有多个tab,每个tab下都是一个table表格来进行数据展示.但,每个table ...
火狐浏览器jtopo节点切换tab后消失报错NS_ERROR_FAILURE的解决
火狐浏览器切换tab后流程节点消失,js报错NS_ERROR_FAILURE,网上查询该错误为元素隐藏后火狐相关的api调用会抛异常,只要先判断下元素的display属性是否为none,为none就不 ...
html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
解决echart在tab中切换时显示不正确
在VUE使用Element UI时,在el-tab-pane添加上lazy='true'属性即可 <el-tab-pane label="远程测试控制" name=" ...
解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题
解决swiper在tab切换时,swiper不生效,以及display:none后,无法自动滑动的问题问题是这样的:当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得 ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
vue element 表格使用fixed固定列后切换菜单时错位问题
开发时由于列表数据项过多需要固定操作列,于是在操作列上加了fixed="right". 一开始没什么问题,但是在切换菜单时出现了错位现象后来找到问题,由于vue element- ...

解决：element切换tab时table的抖动问题

解决：element切换tab时table的抖动问题相关推荐

最新文章

热门文章