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

前言

在现代 web 应用中，用户体验是至关重要的。然而，在使用 element 中的 el-tabs 组件时，相信有不少开发者都会遇到切换时的闪屏问题。这个问题可能导致用户在切换标签页时感到不适，降低了用户体验，本文将探讨这个问题的根本原因，并提供一些有效的解决方案，以确保 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>
1
2
3
4
5
6
7
8

标签切换时的效果

---

出现的原因

其实出现闪屏的主要原因是 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>
1
2
3
4
5
6
7
8

标签切换时的效果