​vue2 iframe嵌套 elementui 切换tab table闪烁问题求解

Question

问题效果：
切换上面的tab，表格像是从左到右展开的，最终会撑满屏幕宽度

代码：表格如下

<el-table v-if="showTable" ref="multipleTable" :data="scriptHirstoryList" border 
      highlight-current-row
      tooltip-effect="dark" stripe :height="h" :row-key="getRowKeys" 
      @sort-change="changeSort" @selection-change="handleSelectionChange"
      style="width: 100%" :header-cell-class-name="cellClass">
// 许多el-table-column
</el-table>

使用了v-if根据路由判断是否显示，在不嵌套iframe时起效果，套了无效

 computed: {
      showTable: function () {
        return this.$route.path.includes('scripthistory');
      }
    },

表格高度在created中得到

    created() {
      this.h = heightUtil.getTableHeight(this.$route);
      this.pageSize = heightUtil.computePageSize(this.h);
      this.pageSizeList.unshift(this.pageSize);
    },

这个问题会是什么导致的呢？如何解决呢？

​

Answer 1

引自免费微信小程序：皆我百晓生

这个问题可能是由于在Vue中切换iframe时引发了一些DOM的渲染问题，从而导致表格在切换时产生闪烁现象。这种问题可能涉及到Vue的生命周期钩子函数、iframe的加载时间以及可能的浏览器渲染问题等。针对这个问题，可以尝试以下几种解决方案：

解决方案一：使用Vue的v-show代替v-if

使用v-show代替v-if来显示和隐藏表格。因为v-show只是简单地切换CSS的display属性，而v-if会完全销毁和重建元素，可能会导致更复杂的DOM操作和渲染问题。尝试修改代码如下：

<el-table v-show="showTable" ref="multipleTable" ...></el-table>

解决方案二：确保iframe完全加载后再渲染表格

如果表格是在iframe中加载的，确保iframe完全加载完成后再渲染表格。可以在iframe的load事件触发后再进行表格的渲染操作。

解决方案三：优化CSS和样式

检查并优化表格相关的CSS样式，确保没有引起闪烁的样式设置。尝试调整动画和过渡效果，以减少闪烁的可能性。

解决方案四：使用Vue的动态组件和<keep-alive>

如果表格的显示与隐藏是与路由相关的，可以考虑使用Vue的动态组件和<keep-alive>来管理组件的缓存，以减少组件的销毁和重建，从而减少闪烁现象。

解决方案五：检查第三方库和插件

确认ElementUI的表格组件是否与Vue的版本兼容，并且检查是否有相关的bug或更新导致闪烁问题。同时，检查使用的其他第三方库或插件是否有影响。

补充说明：调试和诊断

为了更准确地找到问题的根源，可以尝试以下步骤进行调试和诊断：

1. 检查控制台是否有任何错误或警告信息。
2. 使用浏览器的开发者工具（如Chrome DevTools）来检查DOM的变化和渲染过程。
3. 尝试在不同的浏览器和设备上测试，看问题是否普遍存在。
4. 简化代码并逐步排查问题，逐步排除可能的干扰因素。

希望这些解决方案能够帮助你解决问题。如果问题依然存在，建议提供更多的代码和错误信息以便更准确地诊断问题。