el-tabs切换按钮定位不准确，部分内容被遮挡（前端vue实战踩坑记录）

在写项目的过程中，特别是vue项，我们最常用到的UI框架就是elementUI，现记录一个今天同事开发遇到的bug。

一、问题描述

页面跳转时，tabs切换按钮被遮挡展示不全，效果如图

正常情况下，右侧的用户后面的…应该显示全的，但此时却只展示了一半。

二、问题解决

原因分析：

1、样式污染

刚开始，我以为是样式污染，于是开始检查元素，但看来看去，没发现有会影响到这里的样式，排除

2、样式书写不正确或边距错误

以为是这个原因，然后注释了所有的样式代码，发现问题还是存在，排除

3、回归原始，查看是否组件问题

用官方最原始的代码，循环30个子项来进行对比

<el-tabs v-model="activeName1">
      <el-tab-pane v-for="item in 30" :label="'用户管理' + item" :key="item" :name="item">
      </el-tab-pane>
 </el-tabs>
1
2
3
4

结果发现没有问题 官方的能正常展示

这下可给我整无语了，既然官方的没问题，那问题还是出在其他地方

4、一步步改造

就拿官方例子，用上面写的直接慢慢改造成自己需要的样子，首先是替换数据，由循环30条更改为从接口获取，activeName更改为从路由获取
这一步改造完之后，发现问题重现了，那么问题定位。

5、查看赋值

由于这些值是从接口获取的，我先将值复制一份，直接写死，发现正常了，那么问题就出在赋值处，然后查看数据量，发现较大，且接口返回较慢。

6、解决问题

同事的代码是获取tabsList数据的同时对active进行赋值，我就猜测是否是赋值过快导致页面渲染未完成，定位不准造成。于是进行改造

this.tabsList = res.data || []
this.$nextTick(()=>{
	this.activeName = this.$route.query.id
})
1
2
3
4

将赋值放于$nextTick中，$nextTick的效果是页面加载完成后再执行。具体请查看官方文档。到这里，发现问题已解决

通过上述问题，可以发现问题出现于赋值过快，导致页面内容并未加载完就进行定位，导致有部分内容并未进行计算，导致定位出现偏差。处理方式为等待页面加载完毕后再进行定位。

以上推测纯为个人猜测，并未查看底层计算规则，如有问题还请指出