ElementUI中el-tabs标签点击切换el-table闪烁问题

源境2025-03-13 10:39

现象：点击切换element ui中el-tabs时候，table会出现闪一下的状况；

初始element ui中el-tabs组件代码如下：

html 复制代码

<el-tabs type="card" v-model="activeName">
  <el-tab-pane label="线路配置" name="first"><lineDetail /></el-tab-pane>
  <el-tab-pane label="车站配置" name="second"> <stationDetail /></el-tab-pane>
  <el-tab-pane label="特殊路段配置" name="three"><specialRoadDetail /></el-tab-pane>
  <el-tab-pane label="管界配置" name="four"><workManagementDetail /></el-tab-pane>
</el-tabs>

解决方案 1：

使用v-if="activeName==='first'"解决闪屏

html 复制代码

<el-tabs type="card" v-model="activeName">
  <el-tab-pane label="线路配置" name="first"><lineDetail v-if="activeName==='first'"/></el-tab-pane>
  <el-tab-pane label="车站配置" name="second"> <stationDetail v-if="activeName==='second'"/></el-tab-pane>
  <el-tab-pane label="特殊路段配置" name="three"><specialRoadDetail v-if="activeName==='three'"/></el-tab-pane>
  <el-tab-pane label="管界配置" name="four"><workManagementDetail v-if="activeName==='four'"/></el-tab-pane>
</el-tabs>

解决方案 2：

内容闪动的原因是由于组件的状态被重置或者之前的状态没有及时清除，导致在组件重新渲染时，出现了短暂的内容闪烁。

例如，当 el-tabs 组件切换到一个新的标签页时，原来标签页中的内容可能还没有完全被销毁，新标签页的内容也还没有完全渲染出来，这就会导致一个短暂的内容闪烁。

为了避免这个问题，可以采用一些方法来优化组件的渲染，以减少组件重复使用时的闪动问题。例如，可以在组件中使用 key 属性来标识组件实例的唯一性，从而在组件状态发生变化时，强制 Vue.js 重新渲染组件。另外，也可以使用 CSS3 的动画效果来控制组件的渐变过渡，以减少闪动的影响。