优化用户体验：解决element中el-tabs组件切换闪屏问题

前言

优化前代码

<el-tabs v-model="activeName" type="border-card" @tab-click="tabOn">
  <el-tab-pane name="first" label="超速记录">
    <SpeedTable ref="speedRef" :messObj="speedRow" />
  </el-tab-pane>
  <el-tab-pane name="second" label="超区记录">
    <AreaTable ref="areaRef" :messObj="areaRow" />
  </el-tab-pane>
</el-tabs>

出现的原因

其实出现闪屏的主要原因是 DOM 重绘和重排。当你点击切换 el-tabs 标签时，浏览器需要重新计算元素的位置和大小，然后重新绘制页面，这个过程会导致页面内容在切换时短暂的闪烁。这是因为切换标签导致了页面结构的改变，浏览器需要重新布局和绘制页面，从而引发闪屏问题。

优化后代码

上面我们分析了闪屏出现的原因，那该如何解决呢？其实非常简单，通过使用 v-if="activeName == 'first'" 解决。

<el-tabs v-model="activeName" type="border-card" @tab-click="tabOn">
  <el-tab-pane name="first" label="超速记录">
    <SpeedTable v-if="activeName == 'first'" ref="speedRef" :messObj="speedRow" />
  </el-tab-pane>
  <el-tab-pane name="second" label="超区记录">
    <AreaTable v-if="activeName == 'second'" ref="areaRef" :messObj="areaRow" />
  </el-tab-pane>
</el-tabs>