iview Tabs 组件开发问题汇总

在iview的GitHub中看到很多的issues，有时候会想，我在使用的过程中基本没遇到什么问题啊，为啥别人就会遇到各种各样的问题呢？可能是因为我的使用方式都比较的安全，最近使用中接二连三的出现了问题，心想，总算遇到了一些问题。

我遇到了什么问题

我遇到了三个问题，其中2个问题与该组建的动画存在关系，还有一个与tabs的隐藏方式有关

• 第一个问题是tab页切换到第二个tab页时，第二个tab页不显示；

• 第二个问题是tab的各个标签的内容的高度会相互间影响；

• 第三个问题是出现在第二个问题解决之后，tab页当中的E charts图标在切换tab页之后会出现显示异常。

问题的解决历程

第一个问题是我首先遇到的，这个又要扯到我项目系统前端开发的模式，系统的各一个功能菜单，一个菜单中包含一个列表页，一个详情页，需要注意的是，列表页与详情页的切换是通过tab来进行切换的，详情页不会使用路由跳转到达，路由会直接跳转到详情页，通过双击列表项，跳转到详情页。

在之前的一段时间，这个模式是没有问题的，但是不是详情页是无法通过路由直接到达的嘛！如果存在直接到达列表详情页的需求怎么办，就真的有这样的需求，其实这样的需求也是比较常见的，我的做法是，跳转到列表页的路由中添加参数，在跳转到列表页是判断路由中是否携带了参数，如果携带了参数，则自动切换到显示detail的tab页。

好了，问题出现了，在列表页加载完成后，判断到路由中存在参数，立即跳转到详情页，整个过程非常的短暂，但是在跳转到详情页的时候看到了什么，看到了空白，通过浏览器的元素审查功能，我们不难看到tabpanel中的div被设置为 visibility: hidden，我想到我明明修改了tab 的value属性，怎么会没有生效呢？我通过vuetools工具发现，属性值确实被我修改了。

我一开始的思路在于数据是双向绑定的，那么我通过vuetools工具修改数据试试看，果然我修改了数据之后，页面显示了，所以