vue.js - Vue Element UI el-tabs首次渲染时选中项横线显示异常问题？

Question

el-tabs加了icon之后，首次刷新时选中状态的横线会长度不够。

切换一下tabs就正常了

<el-tabs v-model="activeMenu">
      <el-tab-pane name="system"><span slot="label"><i class="el-icon-search"></i> 系统日志</span></el-tab-pane>
      <el-tab-pane name="sql"><span slot="label"><i class="el-icon-tickets"></i> SQL慢日志</span></el-tab-pane>
    </el-tabs>

我把i标签去掉长度就正常了.......
有方法解决这个问题吗

Answer 1

试着没问题啊，得看看你的样式或者其他逻辑是否有影响

Answer 2

在Vue和Element UI中，当你使用el-tabs组件并在el-tab-pane的label插槽中添加图标时，可能会遇到首次渲染时选中项的横线显示异常的问题。这通常是由于图标的加载或渲染时机与el-tabs的渲染时机不同步所导致的。

为了解决这个问题，你可以尝试以下几种方法：

1. 确保图标类已正确加载：
   确保你的图标类（如el-icon-search和el-icon-tickets）已经被正确加载。这通常是通过在你的项目中引入Element UI的CSS文件来实现的。

2. 使用Vue的mounted钩子或nextTick：
   在Vue组件的mounted钩子中，或者在nextTick回调中，手动触发一个更新或重绘。这可以确保在DOM完全渲染后，图标和el-tabs的样式能够正确同步。

   mounted() {
     this.$nextTick(() => {
       // 可以在这里尝试一些DOM操作或样式更新，但通常Element UI会自动处理
       // 如果需要，可以尝试重新设置activeMenu的值来触发重绘
       this.$forceUpdate(); // 谨慎使用，这会强制组件重新渲染
     });
   }

注意：$forceUpdate()是一个比较激进的方法，通常不推荐在生产环境中使用，因为它会跳过组件的虚拟DOM比较过程，直接进行DOM的更新。

3. CSS样式调整：
   检查并调整你的CSS样式，确保没有影响到el-tabs或其子元素的渲染。特别是与el-tabs和图标相关的样式。
4. Element UI版本：
   确保你使用的Element UI版本是最新的，或者至少是一个稳定版本。有时候，这类问题可能是由于Element UI的某个bug引起的，而这些bug可能在新版本中已经被修复。
5. 查看Element UI的issue和社区：
   查看Element UI的GitHub仓库或相关社区，看看是否有其他人遇到了类似的问题，并找到了解决方案。
6. 简化问题：
   尝试移除一些非必要的CSS或JavaScript代码，看看问题是否仍然存在。这有助于确定问题的根源。
7. 替代方案：
   如果上述方法都不能解决问题，你可以考虑使用其他方式来显示图标，比如将图标作为背景图片或直接在el-tab-pane的label属性中通过HTML字符串来插入图标（尽管Element UI的官方文档可能不推荐这种做法）。

希望这些方法能帮助你解决问题！如果问题仍然存在，请提供更多的代码和上下文信息以便进一步分析。